用于幻灯片导航控制按钮的自定义图标/图像，如viber.com上

我正在使用flexslider，我想改变。 。 。 将导航控件滑动到我自己的图标或每张幻灯片的图像。 喜欢http://viber.com上的幻灯片，如果不能在flexslider上使用插件，我可以这样做。

Answer 1

我想你可以通过调整一些css和js来尝试这种方法：

首先，使用css隐藏flexslider的默认导航项目符号：

.flex-control-nav.flex-control-paging { display:none; } 

其次，添加您的自定义导航html并以您想要的任何方式设计它。 但请确保幻灯片和自定义导航锚点的数量相同。 我使用图标图像进行自定义导航：

现在，将click事件绑定到这些自定义导航元素上，这反过来会触发隐藏的flexslider默认导航上的单击。

 $(document).on('click', '.custom img', function () { var index = $('.custom img').index($(this)); //Get the index of clicked navigation element var nav = $('.flex-control-nav a')[index]; //Get the navigation element of corresponding index from flexslider. $(nav).trigger('click'); //Finally, trigger click }); 

演示： http ： //jsfiddle.net/lotusgodkk/VC4L3/2/

Answer 2

您可以像这里一样使用Flex滑块的Carousel： http ： //flexslider.woothemes.com/thumbnail-slider.html

当然，你必须更换你的图标并更改旋转木马的一些css，使你的滑块与viber的滑块相同。