Question

一直在尝试各种各样的事情，并四处搜索，期待其他人也这样做，但是无处可去......我得到的最好结果是旋转木马工作的第一个例子，但其余的都没有。为什么.each（）函数不起作用？

注意：主要目的是让多个轮播具有一个.js控件块。脚本会拉出单个轮播实例变量，例如要显示的项目数，延迟，如果是否加载，主题类，来自每个实例的等等基于数据变量=＆＃34; xyz＆＃34;值...并且它可以在页面上单独标识（使用的唯一类或ID＆＃39; s）轮播，但不是这种（更有效的）多方法。

如你所见，我试图根据公共类＆＃34; .galleryowlmulti＆＃34;找到旋转木马，然后找到他们的父容器ID来唯一识别它（因为我认为这是问题？）然后将变量应用于每个轮播实例。希望有道理吗？

一个滑块的示例HTML片段在同一页面中重复但具有唯一的ID（请注意＆＃34; .owl-carousel＆＃34;在我使用的地方不需要＆＃34; .owlcarousel＆＃ 34;）：

<span id="unique-id1" class="slider">               
      <span class="titleh3">Title</span>            
      <div class="galleryowlmulti" data-owlitemshow="8" data-owlmargin="10" data-owltimeout="4000" data-owllazy="true" data-owldots="false" data-owlautoplay="false" data-owlslideby="page" data-owlthemes="owltheme-smallnav">
          <div class="owlcarousel">                 
            <div class="item">1st slide</div>
            <div class="item">2nd slide</div>   
          </div>        
      </div>                
</span>
<span id="unique-id2" class="slider">               
      <span class="titleh3">Title</span>            
      <div class="galleryowlmulti" data-owlitemshow="8" data-owlmargin="10" data-owltimeout="4000" data-owllazy="true" data-owldots="false" data-owlautoplay="false" data-owlslideby="page" data-owlthemes="owltheme-smallnav">
          <div class="owlcarousel">                 
            <div class="item">1st slide</div>
            <div class="item">2nd slide</div>   
          </div>        
      </div>                
</span>

JavaScript：

$(function () {
 $('.galleryowlmulti').each(function() {

    // *** declare identifier? ***
     var owl_id = $(this).closest('.slider').prop('id'); // .attr('id'); // .prop('id');
     var owl_declare = $('#' + owl_id + ' .galleryowlmulti'); // owl_id.find('.galleryowlmulti'); // $('#' + owl_id + ' .galleryowlmulti'),
     var owl_instance = $('#' + owl_id + ' .owlcarousel'); // $(".owlcarousel", this) // owl_id.find('.owlcarousel'); // $('#' + owl_id + ' .owlcarousel');
    // pull variables from page
     var owl_owlthemes = owl_declare.data('owlthemes'),
     owl_owlitemshow = owl_declare.data('owlitemshow'),
     owl_owllazy = owl_declare.data('owllazy'),
     owl_owlmargin = owl_declare.data('owlmargin'),
     owl_owldots = owl_declare.data('owldots'),
     owl_owlautoplay = owl_declare.data('owlautoplay'),
     owl_owltimeout = owl_declare.data('owltimeout'),
     owl_slidebyf = owl_declare.data('owlslideby');

    // calc the items to show breaks
    var owl_owlitemshow75=Math.round(owl_owlitemshow*0.75), 
    owl_owlitemshow50=Math.round(owl_owlitemshow*0.5), 
    owl_owlitemshow25=Math.round(owl_owlitemshow*0.25);

    // calculate item count
    var item_count = parseInt(owl_instance.find('.item').length);
    var true_false = 0;
    if (item_count <=1) {true_false = false; owl_owldots = false;} else {true_false = true;}
    //
    // control nav visiblity thumbs shown vs thumbs allowed visible
    // see: http://stackoverflow.com/a/33252395/3794783
    // owl_instance.on('initialized.owl.carousel resized.owl.carousel', function(e) {
    //    $(e.target).toggleClass('owl-nonav', e.item.count <= e.page.size);
    // }); 
    owl_instance.owlCarousel({
      themeClass: owl_owlthemes,
      autoplay: owl_owlautoplay,
      autoplayTimeout: owl_owltimeout,
      items: owl_owlitemshow,
      margin: owl_owlmargin,
      responsive:{
            0:{items:1,nav:true},
            389:{items:owl_owlitemshow25},
            605:{items:owl_owlitemshow50},
            1023:{items:owl_owlitemshow75},
            1289:{items:owl_owlitemshow}
       },
      loop: true_false, 
      nav: true_false,
      slideBy: owl_slidebyf,
      lazyLoad: owl_owllazy, // IMG markup (lazyOwl = V1 / owl-lazy = v2 ): class="owl-lazy" and data-src="url_to_img" src="" or/and data-src-retina="url_to_highres_img"
      dots: owl_owldots,
      //
      // backport the classes to older used ones
      navContainerClass: 'owl-buttons',
      dotsClass: 'owl-pagination',
      dotClass: 'owl-page',
      autoplayHoverPause:true, //false
      onInitialized: function() {
        if(owl_slidebyf == 'page'){
            owl_instance.owlCarousel({slideBy:page})
         }
      }     
    });

  });
});

小提琴示例：

See JS Fiddle

更新

我在页面上获取多个实例并开始工作（-ish as lazyload isnt happy）..

在小提琴中，删除或注释掉以下内容：

responsive:{
    0:{items:1,nav:true},
    389:{items:owl_owlitemshow25},
    605:{items:owl_owlitemshow50},
    1023:{items:owl_owlitemshow75},
    1289:{items:owl_owlitemshow}
},

哎呀...这也需要评论或删除那么它有效吗？ WTH？！

onInitialized: function() {
 if(owl_slidebyf == 'page'){
   owl_instance.owlCarousel({slideBy:page})
 }
}

更新2：

删除＆＃34; nav：true＆＃34;在响应似乎修复....似乎是其他人阅读的罪魁祸首...如果删除原始脚本代码应该为你工作：）

Answer 1

只需在每个旋转木马附近添加一些箭头（div，span等），然后为它们分配 .carousel-arrow-left 和 .carousel-arrow-right 。接下来将此javascript添加到您的js文件中。

Javascript

// carousel arrows
$('.carousel-arrow-left').click(function(){
    $(this).next(".carousel-product-list").trigger('prev.owl.carousel');
});
$('.carousel-arrow-right').click(function(){
    $(this).prev(".carousel-product-list").trigger('next.owl.carousel');
});

假设每个轮播都被称为 .carousel-product-list 。现在，点击后页面上的每个右箭头都会找到下一个名称为.carousel-product-list的类，然后执行命令next.owl.carousel，这意味着轮播前进了一个项目。

使用单个javascript声明和.each（）的多个Owl V2滑块

1 个答案: