Saber 酱的抱枕

flexslider官网 使用参考 查看demo代码

简单地说，flexslider是个图片切换插件，依赖于jQuery，提供几种使用场景。使用起来很简单，但如果要对它进行修改那坑也是很多的。我今天用它的基本功能做了个demo。

这个demo外层宽度是100%，适合做通屏banner切换。这种情况下，为使图片始终居中，使用时需修改.slides img的left值为图片宽度的一半。如1920px的图片则设置为-960px。

如果图片是固定宽度，修改.flexslider的宽度为固定宽度就好。此时用于图片居中的.slides img这行css可以删掉。

前面说这个插件坑，是因为这个插件为了它的demo效果，加了边框、阴影、边距等效果，我用的时候又要去掉。它的指示器在图片区域之外，调到图片上结果被图片挡住了←_← 想用它做通屏切换，又加了一些限制。还有其他问题，在demo里面的css注释中可以看到。费尽心力改完一个又一个坑之后，感觉如果自己写一个出来也早就做完了。

flexslider还有些其他的问题，如找不到官方文档，而网上很多参数根本没用了；鼠标点击指示器才会切换，悬浮不行。

使用flexslider做图片切换效果