Custom icon/image for slide navigation control buttons like on viber.com

Question

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 http://viber.com if not possible on flexslider in which plugin can i do that.

Fortuitous

if (No sample code && No Jsfiddle) { No help. }; – Shift

Using CSS you can apply a different background for the bullet point. Try something from your end then come up with questions/clarifications. – Monzon

Answer 1

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="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>

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 : http://jsfiddle.net/lotusgodkk/VC4L3/2/

Southsoutheast

Answer 2

You can use Carousel of flex slider like here: http://flexslider.woothemes.com/thumbnail-slider.html

Of course, you have to replace your icon and change some css of carousel to make your slider the same as viber's slider.

Christogram