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

Question

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

Answer 1

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

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

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

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

<div class="custom">
    <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678131-money-16.png" />
    <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678131-money-16.png" />
    <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678131-money-16.png" />
    <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678131-money-16.png" />
    <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678131-money-16.png" />
</div>

现在，在这些自定义导航元素上绑定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

您可以像以下一样使用柔性滑块的旋转木马：http://flexslider.woothemes.com/thumbnail-slider.html

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