Как разместить 2 owl карусели на одной странице?

Question

[Stacy None]

Вот мой сайт
Я подключил owl карусель
Проблема в том, что навигация (стрелочки < >) работают неправильно. Они прокручивают по очереди в одну сторону сначала одну карусель а в другую сторону другую карусель.
Как исправить? Я так понимаю нужно использовать некий DOM элемент. Но не могу так как не шарю в этом ;)
Вот сам код обеих каруселей:

$(document).ready(function(){
  $(".slide-one").owlCarousel({
        loop:false,
    	margin:30,
    	nav:true,
    	navText : ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
		navContainer: '.main-content .custom-nav',
    	dots:false,
    	responsive:{
        0:{
          items:1
        },
        300:{
            items:1
        },
        540:{
            items:2
        },
        960:{
            items:3
        },
        1140:{
          items:5
        }
    	}
    });

    $(".slide-two").owlCarousel({
        loop:false,
    	margin:30,
    	nav:true,
    	navText : ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
		navContainer: '.main-content .custom-nav',
    	dots:false,
    	responsive:{
        0:{
          items:1
        },
        300:{
            items:1
        },
        540:{
            items:2
        },
        960:{
            items:3
        },
        1140:{
          items:5
        }
    	}
    });
});

Comments

[sergeyyarkov]

Можно разметку html посмотреть ?

[Stacy None]

sergeyyarkov,

<div class="main-content">
    			<div class="owl-carousel owl-theme slide-one">
    				{custom category="1-100" template="topnews" limit="8" order="date" sort="reads" cache="no"}
    			</div>
    			<div class="owl-theme">
           	 		<div class="owl-controls">
                		<div class="custom-nav owl-nav"></div>
            		</div>
    			</div>
    		</div>

в custom это блоки которые прокручиваются там

[brees]

owl карусель к слову deprecated, лучше кходить с нее

Answer 1

[Александр Логинов-Солоницын]

Чтобы работало адекватно, нужно блоку с классом custom-nav дать уникальные классы для каждого слайдера.
У меня получилось вот так:

navContainer: '.main-content .slide-one-nav', // первый

navContainer: '.main-content .slide-two-nav', // второй

Ну и не забыть конечно-же эти классы еще в html прописать

<div class="custom-nav owl-nav slide-one-nav"></div>

<div class="custom-nav owl-nav slide-two-nav"></div>

Дополнительно можно посмотреть в демке https://codepen.io/login2030/pen/oNvwXLx?editors=1010

Comments

[Stacy None]

Биг СПС! обожаю таких людей )

[Александр Логинов-Солоницын]

Stacy None, если вопрос задан конкретно, то чего б не помочь) удачи!