WooThemes

FlexSlider 2

The best responsive slider. Period.

Download Flexslider

Other Examples

  • Basic Slider
  • Basic Slider customDirectionNav
  • Basic Slider with Simple Caption
  • Slider w/thumbnail controlNav pattern
  • Slider w/thumbnail slider
  • Basic Carousel
  • Carousel with min and max ranges
  • Carousel with dynamic min/max ranges
  • Video & the api (vimeo)
  • Video & the api (wistia)

RTL Examples

  • Basic Slider
  • Slider with Simple Caption w/thumbnail slider
  • Basic Carousel
  • Previous
  • Next
  • Previous
  • Next

Slider with Carousel Slider as Navigation

  • JS
  • HTML
$(window).load(function() {
  // The slider being synced must be initialized first
  $('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 210,
    itemMargin: 5,
    asNavFor: '#slider'
  });
 
  $('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel"
  });
});
<!-- Place somewhere in the <body> of your page -->
<div id="slider" class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide4.jpg" />
    </li>
    <!-- items mirrored twice, total of 12 -->
  </ul>
</div>
<div id="carousel" class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide4.jpg" />
    </li>
    <!-- items mirrored twice, total of 12 -->
  </ul>
</div>