多个猫头鹰V2滑块使用单个JavaScript声明和.each（）

Question

一直在尝试各种各样的事情，并四处搜索期待别人做了同样的事情，但无法快速获得..最好的结果是我的第一个实例旋转木马工作，但其余的都没有。为什么.each（）函数不起作用？

注意：主要目的是让多个传送带带一个.js控制块。脚本将单个传送带实例变量（如项目数）显示出来，延迟，如果是延迟加载或不加载，主题类，等等从每个实例基于data-variable =“xyz”值......并且它可以在页面上单独识别（使用唯一类或ID）旋转木马，但不能使用这种更有效的多重方法。

正如你看到我试图找到基于普通类“.galleryowlmulti”的轮播，然后找到它们的父容器ID来唯一标识它（因为我认为这是问题？），然后应用变量到每个轮播实例。希望这是有道理的？

<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：

例HTML在同一页面，但具有独特的ID（请注意，“.owlcarousel”不需要，我用“.owlcarousel”）重复一个滑块的片段：

$(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

UPDATE：

我得到了某种方式让网页复式实例消防工作（如-ish未启用lazyload快乐）..

在小提琴，删除或注释掉下列一起：

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

Ooops ...这也需要注释掉或删除THEN它的作品？ WTH？

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

更新2：

取出“导航：真正的”在响应似乎解决....好像是为别人读的罪魁祸首......如果去掉原来的脚本代码应该为你工作:)

Answer 1

只需将每个转盘附近添加一些箭（DIV，跨度，等等），并为它们分配类.carousel左箭头和.carousel右箭头。接下来将此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产品列表。现在，点击后页面上的每个右箭头都会找到下一个名为.carousel-product-list的类，并执行next.owl.carousel命令，这意味着该轮播由一个项目前进。