하나의 자바 스크립트 선언과 .each()를 사용하는 여러 개의 올빼미 V2 슬라이더

Question

여러 가지 시도를 해본 결과, 다른 사람이 동일하게 수행했음을 기대하면서 검색했지만 아무데도 빨리 가려하지 않았습니다. 내가 얻은 최상의 결과는 컨베이어가 작동하지만 나머지 모든 것은 작동하지 않습니다. .each() 함수가 작동하지 않는 이유는 무엇입니까?

참고 : 주요 목표는 .js 제어 블록 하나가있는 여러 회전식 슬라이드 쇼를 만드는 것입니다. 스크립트는 지연된로드 또는 지연, 표시 할 항목 수와 같은 개별 회전식 슬라이드의 인스턴스 변수를 가져옵니다. , 등 데이터 변수 = "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> 

자바 스크립트 : 같은 페이지에 있지만 고유 한 ID의 (나는 ".owlcarousel"를 사용 여기서 ".owlcarousel는"필요하지 않은 점에 유의하시기 바랍니다) 반복 한 슬라이더의

예 HTML 코드 조각 :

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

나는 해고 작업 바이올린에서

..

(lazyload 밤은 행복으로 -ish), 제거하거나 다음을 주석 페이지에서 mutliple 인스턴스를 얻기과 함께 몇 가지 방법이있어 :

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

Ooops ... 또한 주석 처리가 필요하거나 제거해야합니까? WTH ?! 제거 중

:

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

업데이트 2 : 원래 스크립트 코드 제거한 경우 응답에서 "탐색을 진정한는"수정 듯 .... ... 읽는 다른 사람에 대한 범인 것으로 보인다 당신을 위해 일 :

Answer 1

는 단순히 각각의 회전 목마 근처에 약간의 화살표 (DIV, 스팬, 무엇이든) 추가하고 그들에게 할당해야 클래스 .carousel 화살표 왼쪽 및 .carousel 화살표 오른쪽. 다음이 Javascript를 js 파일에 추가하십시오.

자바 스크립트는

// 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 명령을 실행합니다. 즉, 회전식 메뉴가 하나의 항목으로 이동한다는 의미입니다.