JS/CSS: Image carousel with interactive thumbnails

index.html

<h2>JS/CSS: Image carousel with interactive thumbnails</h2>

<div class="component">
  <div id="carousel" class="owl-carousel main-carousel">
    <div class="item">
      <img src="http://placehold.it/600x400/ACFF9C?text=Placeholder+image" alt="" class="image" />
    </div>
    <div class="item">
      <img src="http://placehold.it/600x400/E8D48E" alt="" class="image" />
    </div>
    <div class="item">
      <img src="http://placehold.it/600x400/FFBAA9" alt="" class="image" />
    </div>
    <div class="item">
      <img src="http://placehold.it/600x400/C88EE8" alt="" class="image" />
    </div>
    <div class="item">
      <img src="http://placehold.it/600x400/B5E1FF" alt="" class="image" />
    </div>
    <div class="item">
      <img src="http://placehold.it/600x400/FFFEA2" alt="" class="image" />
    </div>
    <div class="item">
      <img src="http://placehold.it/600x400/E8BF94" alt="" class="image" />
    </div>
    <div class="item">
      <img src="http://placehold.it/600x400/FFAFD9" alt="" class="image" />
    </div>
    <div class="item">
      <img src="http://placehold.it/400x600/9B99E8" alt="" class="image" />
    </div>
    <div class="item">
      <img src="http://placehold.it/600x400/BBFFF2" alt="" class="image" />
    </div>
    <div class="item">
      <img src="http://placehold.it/600x300/FFEAB0" alt="" class="image" />
    </div>
    <div class="item">
      <img src="http://placehold.it/600x400/E8A8A0" alt="" class="image" />
    </div>
    <div class="item">
      <img src="http://placehold.it/600x300/D9BDFF" alt="" class="image" />
    </div>
    <div class="item">
      <img src="http://placehold.it/600x400/A6DEE8" alt="" class="image" />
    </div>
    <div class="item">
      <img src="http://placehold.it/600x400/D1FFC2" alt="" class="image" />
    </div>
  </div>
  <div class="thumbnails-wrapper">
    <div class="collapse-button">
      <div class="icon"></div>
    </div>
    <div class="counter">
      <span class="current-item"></span>/<span class="max-items"></span>
    </div>
    <div id="thumbnails" class="owl-carousel">
      <div class="item">
        <img src="http://placehold.it/120x80/ACFF9C?text=Placeholder+image" alt="" class="image" />
      </div>
      <div class="item">
        <img src="http://placehold.it/120x80/E8D48E" alt="" class="image" />
      </div>
      <div class="item">
        <img src="http://placehold.it/120x80/FFBAA9" alt="" class="image" />
      </div>
      <div class="item">
        <img src="http://placehold.it/120x80/C88EE8" alt="" class="image" />
      </div>
      <div class="item">
        <img src="http://placehold.it/120x80/B5E1FF" alt="" class="image" />
      </div>
      <div class="item">
        <img src="http://placehold.it/120x80/FFFEA2" alt="" class="image" />
      </div>
      <div class="item">
        <img src="http://placehold.it/120x80/E8BF94" alt="" class="image" />
      </div>
      <div class="item">
        <img src="http://placehold.it/120x80/FFAFD9" alt="" class="image" />
      </div>
      <div class="item">
        <img src="http://placehold.it/80x120/9B99E8" alt="" class="image" />
      </div>
      <div class="item">
        <img src="http://placehold.it/120x80/BBFFF2" alt="" class="image" />
      </div>
      <div class="item">
        <img src="http://placehold.it/120x60/FFEAB0" alt="" class="image" />
      </div>
      <div class="item">
        <img src="http://placehold.it/120x80/E8A8A0" alt="" class="image" />
      </div>
      <div class="item">
        <img src="http://placehold.it/120x80/D9BDFF" alt="" class="image" />
      </div>
      <div class="item">
        <img src="http://placehold.it/120x80/A6DEE8" alt="" class="image" />
      </div>
      <div class="item">
        <img src="http://placehold.it/120x80/D1FFC2" alt="" class="image" />
      </div>
    </div>
  </div>
</div>

js-css-image-carousel-with-interactive-thumbnails.markdown

JS/CSS: Image carousel with interactive thumbnails

Using jQuery and Owl Carousel

A Pen by Farih Muhammad on CodePen.

License.

script.js

var primary = $("#carousel");
var secondary = $("#thumbnails");

$(document).ready(function() {
  primary.owlCarousel({
    singleItem             : true,
    slideSpeed             : 1000,
    pagination             : false,
    afterAction            : syncPosition,
    responsiveRefreshRate  : 200,
    navigation             : true,
    navigationText        : ["",""]
  });

  secondary.owlCarousel({
    items                 : 7,
    itemsDesktop          : [1200,8],
    itemsDesktopSmall     : [992,7],
    itemsTablet           : [768,6],
    itemsMobile           : [480,4],
    pagination            : false,
    responsiveRefreshRate : 100,
    navigation            : true,
    navigationText        : ["",""],
    afterInit             : function(el) {
      el.find(".owl-item").eq(0).addClass("synced");
    }
  });

  function syncPosition(el) {
    var current = this.currentItem;
    secondary.find(".owl-item").removeClass("synced").eq(current).addClass("synced");
    if (secondary.data("owlCarousel") !== undefined) {
      center(current);
    }
    $('.current-item').html(this.owl.currentItem + 1);
    $('.max-items').html(this.owl.owlItems.length);
  }

  secondary.on("click", ".owl-item", function(e) {
    e.preventDefault();
    var number = $(this).data("owlItem");
    primary.trigger("owl.goTo",number);
  });

  function center(number) {
    var sync2visible = secondary.data("owlCarousel").owl.visibleItems;
    var num = number;
    var found = false;
    for (var i in sync2visible) {
      if (num === sync2visible[i]) {
        var found = true;
      }
    }

    if (found===false) {
      if (num>sync2visible[sync2visible.length-1]) {
        secondary.trigger("owl.goTo", num - sync2visible.length+2);
      } else{
        if (num - 1 === -1) {
          num = 0;
        }
        secondary.trigger("owl.goTo", num);
      }
    } else if (num === sync2visible[sync2visible.length-1]) {
      secondary.trigger("owl.goTo", sync2visible[1]);
    } else if (num === sync2visible[0]) {
      secondary.trigger("owl.goTo", num-1);
    }
  }
});

$( ".collapse-button" ).click(function() {
  var thumbnailsWrapper = $('.thumbnails-wrapper');
  if(thumbnailsWrapper.position().top < thumbnailsWrapper.parent().height() - 1){
    thumbnailsWrapper.animate({bottom: '-' + thumbnailsWrapper.outerHeight() +'px'});
    thumbnailsWrapper.find('.icon').addClass('-flip');
  }
  else {
    thumbnailsWrapper.animate({bottom: '0'});
    thumbnailsWrapper.find('.icon').removeClass('-flip');
  }
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>

style.scss

$carousel-lg-width: 600px;
$carousel-lg-height: 400px;
$carousel-md-width: 450px;
$carousel-md-height: 300px;
$carousel-sm-width: 300px;
$carousel-sm-height: 200px;

.component {
  position: relative;
  overflow: hidden;

  @media (min-width: 993px) {
    width: $carousel-lg-width;
    height: $carousel-lg-height;
  }

  @media (min-width: 481px) and (max-width: 992px) {
    width: $carousel-md-width;
    height: $carousel-md-height;
  }

  @media (max-width: 480px) {
    width: $carousel-sm-width;
    height: $carousel-sm-height;
  }
}

.main-carousel {
  .owl-prev {
    left: 10px;
    
    &:after {
      border-right: 15px solid rgba(0, 0, 0, 0.5);
    }
  }

  .owl-next {
    right: 10px;
    
    &:after {
      border-left: 15px solid rgba(0, 0, 0, 0.5);
    }
  }
  
  .owl-prev, .owl-next {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    opacity: 0.5;
    
    &:after {
      content: '';
      display: inline-block;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
      
      @media (max-width: 480px) {
        border-top-width: 15px;
        border-bottom-width: 15px;
        border-left-width: 11px;
        border-right-width: 11px;
      }
    }
  }

  .item {
    @media (min-width: 993px) {
      height: $carousel-lg-height;
    }

    @media (min-width: 481px) and (max-width: 992px) {
      height: $carousel-md-height;
    }

    @media (max-width: 480px) {
      height: $carousel-sm-height;
    }

    .image {
      @media (min-width: 993px) {
        max-height: $carousel-lg-height;
      }

      @media (min-width: 481px) and (max-width: 992px) {
        max-height: $carousel-md-height;
      }

      @media (max-width: 480px) {
        max-height: $carousel-sm-height;
      }
    }
  }
}

.thumbnails-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px 30px;

  .item {
    margin: 5px;
    cursor: pointer;
    height: 36px;

    .image {
      border: 1px solid #9F9EA2;
      max-height: 36px;
    }
  }

  .synced .image {
    border-color: #1699FF;
  }

  .owl-prev, .owl-next {
    position: absolute;
    height: 11px;
    width: 1px;
    bottom: 50%;
    transform: translate(-50%, 0);

    &:after {
      content: '';
      display: inline-block;
      border-top: 11px solid transparent;
      border-bottom: 11px solid transparent;
    }
  }

  .owl-prev {
    left: -15px;

    &:after {
      border-right: 9px solid #fff;
    }
  }

  .owl-next {
    right: -5px;

    &:after {
      border-left: 9px solid #fff;
    }
  }
}

.item {
  position: relative;
}

.image {
  position: absolute;
  top: 50%;
  left: 50%;  
  max-width: 100%;
  height: auto;
  display: block;
  transform: translate(-50%, -50%);
}

.collapse-button {
  position: absolute;
  border-bottom: 11px solid rgba(200, 60, 60, 0.5);
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  height: 0;
  width: 63px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  top: -11px;

  .icon {
    position: relative;
    top: 2px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid white;
    margin: 0 auto;

    &.-flip {
      border-top: 0;
      border-bottom: 7px solid white;
    }
  }
}

.counter {
  position: absolute;
  right: 10px;
  top: -30px;
  z-index: 2;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 3px 8px;
  border-radius: 15px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  
  @media (max-width: 480px) {
    font-size: 10px;
    top: -15px;
    padding: 1px 6px;
  }
}

body {
  background: #fff9f7;
  margin: 20px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet" />