我使用flexslider,我想更改。 。 。幻灯片导航控制到我自己的图标或每个幻灯片的图像。像幻灯片上的
I am using flexslider and i want to change the . . . slide navigation control to my own icons or image for each slide. like the slide on viber if not possible on flexslider in which plugin can i do that.
解决方案I think you can try this approach by tweaking with some css and js:
First, hide the default navigation bullets of flexslider using css:
.flex-control-nav.flex-control-paging { display:none; }Second, add your custom navigation html and design it in whatever way you want. But make sure that the number of slides and custom navigation anchors are same. I used icon images for custom navigation:
<div class="custom"> <img src="cdn0.iconfinder/data/icons/small-n-flat/24/678131-money-16.png" /> <img src="cdn0.iconfinder/data/icons/small-n-flat/24/678131-money-16.png" /> <img src="cdn0.iconfinder/data/icons/small-n-flat/24/678131-money-16.png" /> <img src="cdn0.iconfinder/data/icons/small-n-flat/24/678131-money-16.png" /> <img src="cdn0.iconfinder/data/icons/small-n-flat/24/678131-money-16.png" /> </div>Now, bind the click event on these custom navigation elements which in turn triggers the click on the default navigation of flexslider which are hidden.
$(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 });Demo : jsfiddle/lotusgodkk/VC4L3/2/
更多推荐
自定义图标/幻灯片导航控制按钮的图像像viber.com
发布评论