viber.com 上的滑动导航控制按钮的自定义图标/图像答案

【问题标题】：Custom icon/image for slide navigation control buttons like on viber.comviber.com 上的滑动导航控制按钮的自定义图标/图像
【发布时间】：2014-08-22 20:49:01
【问题描述】：

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

【问题讨论】：

if (没有示例代码 && 没有 Jsfiddle) { 没有帮助。 };
使用 CSS 您可以为项目符号点应用不同的背景。从你的角度尝试一些事情，然后提出问题/澄清。

标签： jquery css slider flexslider

【解决方案1】：

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

当然，你必须更换你的图标，并改变一些轮播的 css 以使你的滑块和 viber 的滑块一样。

【讨论】：

【解决方案2】：

我认为您可以通过调整一些 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>

现在，在这些自定义导航元素上绑定点击事件，这反过来又会触发对隐藏的 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/

【讨论】：