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

标签 javascript jquery html

我发现了这些轮播图(在尝试了六个类似的轮播图后，这些轮播图在放置在引导模式中时崩溃了)……最初自定义 js 函数附加到 ID，我将其更改为类名以使其他轮播图显示。

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

有没有办法让它们独立而不需要在JS中添加ID？我用 PHP 添加内容；我想我只能将 ID 添加到 HTML(模式已经从帖子中为每个画廊提取了唯一的 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>

最佳答案

单击缩略图和箭头时设置次要和主要变量，

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>

关于javascript - 使同一页面中的多个图像轮播独立，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53024836/

上一篇：javascript - 如何在node.js中为不同的环境定义不同的变量？

下一篇：javascript - 迭代，检查一些表单值是否每 2 秒更新一次

相关文章：

javascript - 检查最新的div

javascript - 使用 CSS 防止页面滚动

javascript - setInterval 函数 - 查询

javascript - 如何从另一个 javascript 文件中的另一个函数读取返回值

javascript - 将图像数组绘制到 Canvas 上

javascript - 如果不是百分比数值，我如何提醒用户？

javascript - 下拉选择菜单以返回没有提交按钮的php变量

html - 如何使用响应将此页脚与导航菜单内的底部对齐

html - Bootstrap 2列嵌套列

javascript - logOnce 高阶函数

©2024 IT工具网  联系我们