jQM - Flexslider example

by 8ogdan

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/flexslider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/jquery.flexslider.js"></script>
    

               


<div class="flexslider">
  <ul class="slides">
    <li data-thumb="https://s2.qwant.com/thumbr/474x266/7/6/eb011964ac05f2ca311e9792f25af780373beaf50fa7fc8ab75017989e223b/th.jpg?">
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
    </li>
    <li data-thumb="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg">
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" />
    </li>
    <li data-thumb="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg">
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" />
    </li>
    <li data-thumb="http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg">
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg" />
    </li>
  </ul>
</div>

JavaScript

// Can also be used with $(document).ready()
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    controlNav: "thumbnails"
  });
  $(".flex-control-thumbs li img").hover(function(){
     $(this).click();
  });
});