使同一页面中的多个图像轮播独立

时间：2018-10-27 18:05:31

标签： javascript jquery html

我找到了这些轮播（尝试了六种类似的轮播，这些轮播在放入引导程序模式后就崩溃了）……最初，自定义js函数附加到ID上，我将其更改为类名，以显示其他轮播。

现在的问题是轮播不是独立的，单击缩略图会更改所有轮播的主图像；此外，区分活动缩略图的.synced类仅适用于第一个轮播。

有没有一种方法可以使它们独立，而无需在JS中添加ID？我正在用PHP添加内容；我想我只能在HTML中添加ID（这些模式已经从帖子中为每个画廊拉出了唯一的ID）

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%);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet"/>


  <div class="component">
    <div class="owl-carousel main-carousel">
      <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>
    <div class="thumbnails-wrapper">
      <div class="owl-carousel thumb-carousel">
        <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>
    </div>
  </div>


  <div class="component">
    <div class="owl-carousel main-carousel">
      <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>
    <div class="thumbnails-wrapper">
      <div class="owl-carousel thumb-carousel">
        <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>
    </div>
  </div>


  <div class="component">
    <div class="owl-carousel main-carousel">
      <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>
    <div class="thumbnails-wrapper">
      <div class="owl-carousel thumb-carousel">
        <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>
    </div>
  </div>


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

1 个答案:

答案 0 :(得分：2)

点击缩略图和箭头时设置辅助变量和主要变量，

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%);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet"/>


  <div class="component">
    <div class="owl-carousel main-carousel">
      <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>
    <div class="thumbnails-wrapper">
      <div class="owl-carousel thumb-carousel">
        <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>
    </div>
  </div>


  <div class="component">
    <div class="owl-carousel main-carousel">
      <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>
    <div class="thumbnails-wrapper">
      <div class="owl-carousel thumb-carousel">
        <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>
    </div>
  </div>


  <div class="component">
    <div class="owl-carousel main-carousel">
      <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>
    <div class="thumbnails-wrapper">
      <div class="owl-carousel thumb-carousel">
        <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>
    </div>
  </div>


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

相关问题
最新问题