0

Есть 3 таких овл-каруселей на сайте, все они подключены через один script.

При подключении 4ой карусели, мне нужны другие опции (к примеру nav:false), по идеи я должен скопировать прошлую карусель, но поменять класс в html - owl-carousel на класс к примеру owl-owl, и написать новую карусель с новыми параметрам в js, с новым классом owl-owl. Когда всё это делаю, новая карусель полностью пропадает, в консоле ошибок нет, в чем может быть проблема?

// CAROUSEL
$('.owl-carousel').owlCarousel({
    loop: true,
    responsiveClass: true,
    navText: true,
    nav: true,
    responsive: {
        0: {
            items: 1,
        },
        600: {
            items: 1,
        },
        1000: {
            items: 1,
            loop: true
        }
    }
});


<div class="owl-carousel owl-theme">
                    <div class="carousel-item">
                        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                            <a href="#" class="our-part-item">
                                <div class="our-part-img">
                                    <img src="img/part-item.jpg" alt="Partner">
                                </div>
                                <span>«Атомные игрушки»</span>
                            </a>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                            <a href="#" class="our-part-item">
                                <div class="our-part-img">
                                    <img src="img/part-item.jpg" alt="Partner">
                                </div>
                                <span>«Атомные игрушки»</span>
                            </a>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                            <a href="#" class="our-part-item">
                                <div class="our-part-img">
                                    <img src="img/part-item.jpg" alt="Partner">
                                </div>
                                <span>«Атомные игрушки»</span>
                            </a>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                            <a href="#" class="our-part-item">
                                <div class="our-part-img">
                                    <img src="img/part-item.jpg" alt="Partner">
                                </div>
                                <span>«Атомные игрушки»</span>
                            </a>
                        </div>
                    </div>


                </div>
3
  • Это, похоже на первую карусель, а где вторая?
    – Crantisz
    14 мар 2017 в 6:46
  • Вторая идентичная, только вместо owl-carousel, класс owl-owl. И в скрипте тоже самое вместо owl-carousel - owl-owl. Во второй мне нужно просто в responsive количество айтемов менять. 14 мар 2017 в 6:50
  • 1
    Возможно у вас для owl-carousel прописаны какие то стили. Попробуйте старым каруселям дописать дополнительно класс например owl-carousel-1 будет <div class="owl-carousel owl-theme owl-carousel-1"> и соответственно для него уже вызывать скрипт, а для новой карусели дописать дополнительно класс например owl-carousel-2. 14 мар 2017 в 6:55

1 ответ 1

1

owl-carousel - обязательный класс для карусели, его нужно оставить в любом случае. Либо определяйте обе карусели по id:

$('#carusel1').owlCarousel({...})
<div class="owl-carousel owl-theme" id='carusel1'>

либо пропишите дополнительный класс:

$('.new-class').owlCarousel({...})
<div class="owl-carousel owl-theme new-class">

// CAROUSEL
$('#carusel1').owlCarousel({
  loop: true,
  responsiveClass: true,
  navText: true,
  nav: true,
  responsive: {
    0: {
      items: 1,
    },
    600: {
      items: 1,
    },
    1000: {
      items: 1,
      loop: true
    }
  }
});

// CAROUSEL
$('#carusel2').owlCarousel({
  loop: true,
  responsiveClass: true,
  navText: true,
  nav: true,
  responsive: {
    0: {
      items: 2,
    },
    600: {
      items: 2,
    },
    1000: {
      items: 3,
      loop: true
    }
  }
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>


<div class="owl-carousel owl-theme" id='carusel1'>
  <div class="carousel-item">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <a href="#" class="our-part-item">
        <div class="our-part-img">
          <img src="img/part-item.jpg" alt="Partner">
        </div>
        <span>«Атомные игрушки»</span>
      </a>
    </div>
  </div>
  <div class="carousel-item">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <a href="#" class="our-part-item">
        <div class="our-part-img">
          <img src="img/part-item.jpg" alt="Partner">
        </div>
        <span>«Атомные игрушки»</span>
      </a>
    </div>
  </div>
  <div class="carousel-item">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <a href="#" class="our-part-item">
        <div class="our-part-img">
          <img src="img/part-item.jpg" alt="Partner">
        </div>
        <span>«Атомные игрушки»</span>
      </a>
    </div>
  </div>
  <div class="carousel-item">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <a href="#" class="our-part-item">
        <div class="our-part-img">
          <img src="img/part-item.jpg" alt="Partner">
        </div>
        <span>«Атомные игрушки»</span>
      </a>
    </div>
  </div>


</div>



<div class="owl-carousel owl-theme" id='carusel2'>
  <div class="carousel-item">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <a href="#" class="our-part-item">
        <div class="our-part-img">
          <img src="img/part-item.jpg" alt="Partner">
        </div>
        <span>«Атомные игрушки»</span>
      </a>
    </div>
  </div>
  <div class="carousel-item">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <a href="#" class="our-part-item">
        <div class="our-part-img">
          <img src="img/part-item.jpg" alt="Partner">
        </div>
        <span>«Атомные игрушки»</span>
      </a>
    </div>
  </div>
  <div class="carousel-item">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <a href="#" class="our-part-item">
        <div class="our-part-img">
          <img src="img/part-item.jpg" alt="Partner">
        </div>
        <span>«Атомные игрушки»</span>
      </a>
    </div>
  </div>
  <div class="carousel-item">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <a href="#" class="our-part-item">
        <div class="our-part-img">
          <img src="img/part-item.jpg" alt="Partner">
        </div>
        <span>«Атомные игрушки»</span>
      </a>
    </div>
  </div>


</div>

4
  • А вообще нормально, что я для 3х каруселей использую один скрипт или лучше разбивать для каждой карусели свой скрипт ? 14 мар 2017 в 13:16
  • 1
    @YourDeveloper нормально
    – Crantisz
    14 мар 2017 в 13:32
  • Последний вопрос, как можно айтемы овл карусель переносить на новую строчку? То есть если в респонсив прописать количество айтемов 8, то они сузятся, чтобы влезть в одну строку, а мне нужно чтоб по 4 на каждой было. 14 мар 2017 в 13:45
  • 1
    Нет, выводите 2 блока на один слайд. Или синхронизируйте 2 карусели
    – Crantisz
    14 мар 2017 в 13:48

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.