FlexSlider background image + thumbnail

FlexSlider background image + thumbnail

by onigetoc

HTML

<script src="https://rawgit.com/woocommerce/FlexSlider/master/jquery.flexslider-min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/woocommerce/FlexSlider/master/flexslider.css">
<section class="slider">

  <div id="slider" class="flexslider">
    <ul class="slides">
      <li style="background-image: url(http://lorempixel.com/500/400/sports/?test=0);">
        <a class="alink" href="#">Shop Now</a>
      </li>
      <li style="background-image: url(http://lorempixel.com/500/400/food/?test=0);">
        <a class="alink" href="#">Shop Now</a>
      </li>
      <li style="background-image: url(http://lorempixel.com/500/400/business/?test=0);">
        <a class="alink" href="#">Shop Now</a>
      </li>
      <li style="background-image: url(http://lorempixel.com/500/400/sports/?test=1);">
        <a class="alink" href="#">Shop Now</a>
      </li>
      <li style="background-image: url(http://lorempixel.com/500/400/food/?test=1);">
        <a class="alink" href="#">Shop Now</a>
      </li>
      <li style="background-image: url(http://lorempixel.com/500/400/city/?test=2);">
        <a class="alink" href="#">Shop Now</a>
      </li>
      <li style="background-image: url(http://lorempixel.com/500/400/nature/?test=2);">
        <a class="alink" href="#">Shop Now</a>
      </li>
      <li style="background-image: url(http://lorempixel.com/500/400/nightlife/?test=3);">
        <a class="alink" href="#">Shop Now</a>
      </li>
    </ul>
  </div>
  <div id="carousel" class="flexslider">
    <ul class="slides">
      <li>
        <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
      </li>
      <li>
        <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" />
      </li>
      <li>
        <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" />
      </li>
      <li>
        <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg" />
 ...

CSS

#slider .flex-next,
#slider .flex-prev {
  /* display:none; */
}

#carousel .flex-viewport {
  /* margin: 0 40px; */
}

.flexslider .slides > li {
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#slider,
.alink {
  min-height: 300px
}
.alink {
  display: block
}

JavaScript

//http://flexslider.woothemes.com/index.html
$(window).load(function() {
  $('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 150,
    itemMargin: 4,
    asNavFor: '#slider'
  });

  $('#slider').flexslider({
    animation: "fade",
    controlNav: true,
    directionNav: true,
    animationLoop: true,
    slideshow: true,
    sync: "#carousel",
    start: function(slider) {
      $('body').removeClass('loading');
    }
  });
});