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
  1. 1
  2. 2
  3. 3
  4. 4
  • Previous
  • Next

Video (Wistia)

  • JS
  • HTML
  // Can also be used with $(document).ready()
  $(window).load(function(){
  // Wistia handler.
  wistiaEmbed = document.getElementById( 'player_1' ).wistiaApi;
 
  // Call fitVid before FlexSlider initializes, so the proper initial height can be retrieved.
  $( '.flexslider' )
    .fitVids()
    .flexslider({
      animation: 'slide',
      useCSS: false,
      animationLoop: false,
      smoothHeight: true,
      start: function( slider ) {
        $('body').removeClass( 'loading' );
      },
      before: function ( slider ) {
        wistiaEmbed.pause();
      }
  });
 
  wistiaEmbed.bind( 'play', function() {
    jQuery( '.flexslider' ).flexslider( 'pause' );
  });
 
  wistiaEmbed.bind( 'end', function() {
    jQuery( '.flexslider' ).flexslider( 'play' );
  });
});
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
  <ul class="slides">
    <li>
      <iframe id="player_1" src="http://fast.wistia.com/embed/iframe/t4yniozocs?controlsVisibleOnLoad=true&playerColor=474745&version=v1&videoHeight=366&videoWidth=650&volumeControl=true&videoFoam=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" width="650" height="366"></iframe>
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide4.jpg" />
    </li>
  </ul>
</div>