несколько сова карусели пальцы - PullRequest
Новая
       10

несколько сова карусели пальцы

0 голосов
/ 19 сентября 2018

Я пытаюсь заставить работать несколько сов-каруселей большими пальцами, но мы можем получить первую работу, а вторая - нет.

Можно ли активировать карусель по классу и получить кучу каруселей?на той же странице работает.Как я могу это исправить ??

У меня один и тот же код для карусели, это HTML-код 

<code>     <pre>
           <div class=" gallery-bloc-thumb owl-carousel">
        <div class="item-gallery">
         <a href="assets/images/image1.png" >
          <img src="assets/images/image1.png">
        </a>
      </div>

      <div class="item-gallery">
       <a href="assets/images/image2.png" > 
         <img src="assets/images/image2.png">
       </a>
     </div>

     <div class="item-gallery">
       <a href="assets/images/image3.png">
        <img src="assets/images/image3.png">
      </a>
    </div>
    </div>
    <div class="gallery-thumb owl-carousel">
     <div class="item-gallery">
       <img src="assets/images/small-caroussel.jpg">
     </div>
     <div class="item-gallery">
       <img src="assets/images/small-caroussel.jpg">
     </div>
     <div class="item-gallery">
      <img src="assets/images/small-caroussel.jpg">
    </div>
    <div class="item-gallery">
     <img src="assets/images/small-caroussel.jpg">
    </div>
    <div class="item-gallery">
     <img src="assets/images/small-caroussel.jpg">
    </div>
    <div class="item-gallery">
      <img src="assets/images/small-caroussel.jpg">
    </div>
    </div>
и код JS 
  const $gal1 = $(".gallery-bloc-thumb");
  const $gal2 = $(".gallery-thumb");
  let position = false;
  let duration = 300;

  $gal1
    .owlCarousel({
      items: 1,
      lazyLoad: false,
      loop: false,
      margin: 10,
      nav: false,
      responsiveClass: true
    })
    .on("changed.owl.carousel", function(e) {
      if (!position) {
        position = true;
        console.log(e.item.index);
        $gal2
          .find(".owl-item")
          .removeClass("current")
          .eq(e.item.index)
          .addClass("current");
        if (
          $gal2
            .find(".owl-item")
            .eq(e.item.index)
            .hasClass("active")
        ) {

        } else {
          $gal2.trigger("to.owl.carousel", [e.item.index, duration, true]);
        }
        position = false;
      }
    });

  $gal2
    .on("initialized.owl.carousel", function() {
      $gal2
        .find(".owl-item")
        .eq(0)
        .addClass("current");
    })
    .owlCarousel({
      items: 6,
      lazyLoad: false,
      loop: false,
      margin: 10,
      nav: false,
      responsiveClass: true
    })
    .on("click", ".owl-item", function(e) {
      e.preventDefault();
      var number = $(this).index();
      $gal1.trigger("to.owl.carousel", [number, duration, true]);
    });
...