Owl Carousel 2 Thumbnails

In this example below you will see how to do a Owl Carousel 2 Thumbnails with some HTML / CSS and Javascript

Owl Carousel 2 Thumbnails example without external plugins or sync. Easy to use. Active class on clicked and on changed.

Thumbnail
This awesome code was written by claudiopedrom, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright claudiopedrom ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Owl Carousel 2 Thumbnails</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="wrapper">
  <div class="owl-slider">
    <div class="item slider">Slider 1</div>
    <div class="item slider">Slider 2</div>
    <div class="item slider">Slider 3</div>
    <div class="item slider">Slider 4</div>
  </div>
  <div class="thumbnails-wrapper">
    <div class="thumbnail"><a href="#">Link 1</a></div>
    <div class="thumbnail"><a href="#">Link 2</a></div>
    <div class="thumbnail"><a href="#">Link 3</a></div>
    <div class="thumbnail"><a href="#">Link 4</a></div>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/claudiopedrom/owl-carousel-2-thumbnails-JGpbQy */
.slider {
  width: 100%;
  height: 200px;
  background: black;
  color: white;
  text-align: center;
}

.thumbnail {
  width: 25%;
  height: 100px;
  float: left;
  background: gray;
}
.thumbnail.active {
  background: blue;
}
.thumbnail:hover {
  background: blue;
}
.thumbnail a {
  display: block;
  width: 100%;
  height: 100%;
  color: white;
  text-align: center;
  text-decoration: none;
}


/*Downloaded from https://www.codeseek.co/claudiopedrom/owl-carousel-2-thumbnails-JGpbQy */
$(document).ready(function() {
  // Init Slider
  $('.owl-slider').owlCarousel({
    items: 1,
    loop: true,
    autoplay: true,
    nav: false,
    dots: false,
  });
  // Pref add class active to 1st thumbnail via js
  $('.thumbnail').eq(0).addClass('active');
  // When slider autoplay or drag is true 
  $('.owl-slider').on('changed.owl.carousel', function(event) {
    $('.thumbnail').removeClass('active');
    var sliders = 4;
    var currentItem = event.item.index - 2;
    if(currentItem >= sliders) {
      currentItem = 0;
    }
    $('.thumbnail').eq(currentItem).addClass('active');
  });
  // When thumbnail is clicked
  $('.thumbnail a').click(function(event) {
    event.preventDefault();
    $('.thumbnail').removeClass('active');
    var index = $('.thumbnail a').index(this);
    $('.thumbnail').eq(index).addClass('active');
    $('.owl-slider').trigger('to.owl.carousel', [index, 300, true]);
  });
});

Comments