Новая овл карусель пропадает

404

15 марта 2017, 16:20

Есть 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>

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

Создание эксклюзивного проекта в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Выдача сайта в поисковиках

Добрый деньСтолкнулся с такой проблемой

302

HTML

png белый фон html

Убираю фон в картинке на прозрачныйсохраняю картинку в формате png, но при отображении на странице все равно в местах где фона не было появляется...

352

HTML

как проверить авторизован ли клиент

ЗдравствуйтеПишу программу при помощи mvc asp

340

HTML

Как прикрутить кластеризацию yandex maps?

Вот так вывожу метки на карту, каким образом можно кластеризировать метки, ymapsObjectManager пробовал использовать, все что получил это Uncaught TypeError:...

403