Making multiple image carousels in same page independent

Question

I found these carousels (after trying half a dozen similar carousels which broke down when placed in bootstrap modals) …originally the custom js function was attached to IDs and I changed that to class names to get the other carousels to show up.

The problem now is that the carousels are not independent, clicking on thumbnails changes the main image across all carousels; furthermore, the .synced class which differentiates the active thumbnail works only for the first carousel.

Is there a way to make them independent without adding IDs to the JS? I'm adding the content with PHP; I think I can only add IDs to the HTML (the modals already pull a unique ID for each gallery from the posts)

var primary = $(".main-carousel");
var secondary = $(".thumb-carousel");

$(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');
  }
});

body {
  margin: 12px;
}
.component {
  position: relative;
  overflow: hidden;
  width: 300px;
  max-height: 300px;
  background: tomato;
  margin: 0 auto 12px;
}

.main-carousel .owl-prev {
  left: 10px;
}
.main-carousel .owl-prev:after {
  border-right: 15px solid rgba(0, 0, 0, 0.5);
}
.main-carousel .owl-next {
  right: 10px;
}
.main-carousel .owl-next:after {
  border-left: 15px solid rgba(0, 0, 0, 0.5);
}
.main-carousel .owl-prev, .main-carousel .owl-next {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  opacity: 0.5;
}
.main-carousel .owl-prev:after, .main-carousel .owl-next:after {
  content: '';
  display: inline-block;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}
.main-carousel .item {
  height: 200px;
}

.thumbnails-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
}
.thumbnails-wrapper .item {
  margin: 5px;
  cursor: pointer;
  height: 36px;
}
.thumbnails-wrapper .item .image {
  border: 2px solid #fff;
  max-height: 36px;
}
.thumbnails-wrapper .synced .image {
  border-color: #1699FF;
}
.thumbnails-wrapper .owl-prev, .thumbnails-wrapper .owl-next {
  position: absolute;
  height: 11px;
  width: 1px;
  bottom: 50%;
  transform: translate(-50%, 0);
}
.thumbnails-wrapper .owl-prev:after, .thumbnails-wrapper .owl-next:after {
  content: '';
  display: inline-block;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}
.thumbnails-wrapper .owl-prev {
  left: -15px;
}
.thumbnails-wrapper .owl-prev:after {
  border-right: 9px solid #fff;
}
.thumbnails-wrapper .owl-next {
  right: -5px;
}
.thumbnails-wrapper .owl-next: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%);
}

Ercan Peker · Accepted Answer

set secondary and primary variables when thumbnails and arrows clicked,

var secondary= $(el).siblings('.thumbnails-wrapper');

var primary= $(this).parents('.component').find('.owl-carousel');

var primary = $(".main-carousel");
var secondary = $(".thumb-carousel");

$(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;
      var secondary= $(el).siblings('.thumbnails-wrapper');
    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");
      var primary= $(this).parents('.component').find('.owl-carousel');
    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');
  }
});

body {
  margin: 12px;
}
.component {
  position: relative;
  overflow: hidden;
  width: 300px;
  max-height: 300px;
  background: tomato;
  margin: 0 auto 12px;
}

.main-carousel .owl-prev {
  left: 10px;
}
.main-carousel .owl-prev:after {
  border-right: 15px solid rgba(0, 0, 0, 0.5);
}
.main-carousel .owl-next {
  right: 10px;
}
.main-carousel .owl-next:after {
  border-left: 15px solid rgba(0, 0, 0, 0.5);
}
.main-carousel .owl-prev, .main-carousel .owl-next {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  opacity: 0.5;
}
.main-carousel .owl-prev:after, .main-carousel .owl-next:after {
  content: '';
  display: inline-block;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}
.main-carousel .item {
  height: 200px;
}

.thumbnails-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
}
.thumbnails-wrapper .item {
  margin: 5px;
  cursor: pointer;
  height: 36px;
}
.thumbnails-wrapper .item .image {
  border: 2px solid #fff;
  max-height: 36px;
}
.thumbnails-wrapper .synced .image {
  border-color: #1699FF;
}
.thumbnails-wrapper .owl-prev, .thumbnails-wrapper .owl-next {
  position: absolute;
  height: 11px;
  width: 1px;
  bottom: 50%;
  transform: translate(-50%, 0);
}
.thumbnails-wrapper .owl-prev:after, .thumbnails-wrapper .owl-next:after {
  content: '';
  display: inline-block;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}
.thumbnails-wrapper .owl-prev {
  left: -15px;
}
.thumbnails-wrapper .owl-prev:after {
  border-right: 9px solid #fff;
}
.thumbnails-wrapper .owl-next {
  right: -5px;
}
.thumbnails-wrapper .owl-next: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%);
}

Making multiple image carousels in same page independent

Answers (1)

Related Questions