Using Flexslider jQuery plugin – with thumbs

Flexslider is a responsive jQuery plugin that you can use on desktop sites and on mobile ones as well.

The best features are:

  • simple markup
  • supported by all major browsers
  • supported by mobile browsers
  • can use any html elements inside the slides
  • touch swipe support

First, you can download the flexslider.js from here.

Step 1. Add the flexslider js/css files

This code must be added in the <head> of the document.

<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>

Step 2. The HTML markup

This code must be added in the <body> of the document.

<div class="flexslider">
    <ul>
      <li><img src="slide1.jpg" /></li>
      <li><img src="slide2.jpg" /></li>
      <li><img src="slide3.jpg" /></li>
    </ul>
</div>

Step 3. Fire the slider

This code must be added after the links added at Step 1.

<script type="text/javascript" charset="utf-8">
    $(window).load(function() {
      $('.flexslider').flexslider();
    });
</script>

The css file can be customized and you can change the navigation buttons, direction buttons, sizes and positions.

Adding an additional thumbnails bar to Flexslider.

Step 1. Follow the previous steps and insert your own flexslider.

Step2. The HTML markup for thumbs

<ul id="thumbs">
    <li><img src="slide1_t.jpg" rel="0" /></li>
    <li><img src="slide2_t.jpgg" rel="1"/></li>
    <li><img src="slide3_t.jpg" rel="2" /></li>
</ul>

Step 3. The new fire script

<script>
$(window).load(function() {
    $('.flexslider').flexslider({
      controlsContainer : ".flexslider",
      start: function(slider){
        $('#thumbs li img').click(function(){
          var index = parseInt($(this).attr('rel'));
          (index > slider.currentSlide) ? slider.direction = "next" : slider.direction = "prev";
          slider.flexAnimate(index, slider.vars.pauseOnAction);
        });
    }
});
</script>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s