幻燈片導航控制按鈕像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> 

現在，結合對這些自定義導航元素這反過來又觸發其上隱藏flexslider的默認導航的Click事件。

$(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的的滑塊。