如何修改slick轮播图插件的左右按钮样式

最近做web项目，由于各种原因想要快点结束这个项目，所以想尽量使用框架和插件解决前端页面。这里我使用了slick插件，是因为我觉得要比swiper插件文档简洁一点。

然后我在做轮播图的时候想要修改掉左右切换按钮

我们到官网上可以看到默认的左右切换按钮是下图的模样
先上我修改之后的效果图

#html代码如下
可以看到这里mould-resume外面还有一层div，这是为什么？

<div class="myCarousel-mould">
	<div><div class="mould-resume"><img src="images/r1.png" alt=""></div></div>
    <div><div class="mould-resume"><img src="images/r2.png" alt=""></div></div>
    <div><div class="mould-resume"><img src="images/r3.png" alt=""></div></div>
    <div><div class="mould-resume"><img src="images/r2.png" alt=""></div></div>
</div>

这里要特别注意，有时候我们可能需要修改div的样式，然后会给div写一个class或者id来识别，但是在调用插件的时候需要注意一下，不是所有的插件都可以直接在div上加class或者id就行的，就像这个slick插件，如果需要修改div样式，一定要在div标签对里面加一层div，再修改里面的div。

红色框内的div无需添加类名，即使添加了也不要做margin、padding等样式。如果想要修改样式，可以在蓝色框内的div加类名做各种样式。

#js的代码如下
这里使用prevArrow参数和nextArrow参数就是解决方案里最核心的部分，
可以看到在参数后面的值里，也就是button里我是放置了一个img的，我就是使用图片置换掉左右切换按钮。

$(document).ready(function () {
	$('.myCarousel-mould').slick({
         arrows: true,
         slidesToShow: 3,
         slidesToScroll: 1,
         dots: true,
         prevArrow: "<button type='button' class='slick-prev slick-arrow'><img src='images/prevMini.png' alt=''></button>",
         nextArrow: "<button type='button' class='slick-next slick-arrow'><img src='images/nextMini.png' alt=''></button>",
    });
});

#最后还要修改一下css代码，在引入的slick-theme.css文件里，将伪类slick-next:before以及slick-prev:before去掉。这样就可以完美解决了。

最后的最后的总结，关于这个问题其实我是花了很久的。因为相关的文档能借鉴的很少，一开始使用图片作为背景，效果不是很理想，因为设计师给的图片大小不合适，另外点击的动态效果也很差。