Fx slider le slider jQuery sémantique

Si il y a une chose récurrente c’est bien le manque de sémantique dans les gadget du web.

Fx slider ne doit pas être le seul mais il est parfaitement sémantique et extrêmement simple d’intégration.

Coté Html une liste suffit pour peut qu’elle soit identifiée ou classé.

Exemple :

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

Coté Js :

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

Évidement, il existe un panoplie d’argument de personnalisation du slider tel que :

animation: "fade",              //Select your animation type (fade/slide/show)
slideshow: true,                //Should the slider animate automatically by default? (true/false)
slideshowSpeed: 7000,           //Set the speed of the slideshow cycling, in milliseconds
animationDuration: 500,         //Set the speed of animations, in milliseconds
directionNav: true,             //Create navigation for previous/next navigation? (true/false)
controlNav: true,               //Create navigation for paging control of each clide? (true/false)
keyboardNav: true,              //Allow for keyboard navigation using left/right keys (true/false)
touchSwipe: true,               //Touch swipe gestures for left/right slide navigation (true/false)
prevText: "Previous",           //Set the text for the "previous" directionNav item
nextText: "Next",               //Set the text for the "next" directionNav item
randomize: false,                //Randomize slide order on page load? (true/false)
slideToStart: 0,                //The slide that the slider should start on. Array notation (0 = first slide)
pauseOnAction: true,            //Pause the slideshow when interacting with control elements, highly recommended. (true/false)
pauseOnHover: false,            //Pause the slideshow when hovering over slider, then resume when no longer hovering (true/false)
controlsContainer: "",          //Advanced property: Can declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.
manualControls: ""              //Advanced property: Can declare custom control navigation. Example would be ".flex-control-nav li a" or "#tabs-nav li", etc. The number of elements in your controlNav should match the number of slides/tabs (obviously).

Source : js4design.com