Marduh-Top
@Marduh-Top
SEO-специалист, сайты на Modx Revo

Несколько owl carousel, как разделить кнопки управления?

на странице заданы несколько owl каруселей, разделив их в скрипте с помощью id.
Вот структура html
<div id="corusel_kv">
    <div class="next_button"><i class="fa fa-angle-right"></i></div>
    <div class="prev_button"><i class="fa fa-angle-left"></i></div>
        <ul id="owl-demo" class="owl-carousel">
        	li-шки
        </ul>
</div>

<div id="corusel_ost">
    <div class="next_button_zag"><i class="fa fa-angle-right"></i></div>
    <div class="prev_button_zag"><i class="fa fa-angle-left"></i></div>
        <ul id="owl-demo-1" >
        	li-шки
        </ul>
</div>

а это уже javascript
var owl = $("#owl-demo");
	owl.owlCarousel({
		items : 3,
		autoHeight : true,
		autoPlay: 3000,
		stopOnHover: true
	});
var owl = $("#owl-demo-1");
	owl.owlCarousel({
		items : 3,
		autoHeight : true,
		autoPlay: 2000,
		stopOnHover: true
	});

на одной из площадок приводился пример "делегирования" своим элементам навигации для карусели
в итоге для дописал к скрипту первому
var owl = $("#owl-demo");
	owl.owlCarousel({
		items : 3,
		autoHeight : true,
		autoPlay: 3000,
		stopOnHover: true
	});
owl.on("mousewheel", ".owl-wrapper", function (e) {
		if (e.deltaY > 0) {
			owl.trigger("owl.prev");
		} else {
			owl.trigger("owl.next");
		}
		e.preventDefault();
	});
	$(".next_button").click(function() {
		owl.trigger("owl.next");
	});
	$(".prev_button").click(function() {
		owl.trigger("owl.prev");
	});
var owl = $("#owl-demo-1");
	owl.owlCarousel({
		items : 3,
		autoHeight : true,
		autoPlay: 2000,
		stopOnHover: true
	});

При добавлении второй карусели кнопки вместо первой начинают работать для второй
в скриптах полный ноль, по примеру сделал одну, все работало, но как вторую добавил, но все...
помогите как скриптом разделить кнопки управления по своим группам
  • Вопрос задан
  • 4510 просмотров
Решения вопроса 1
Marduh-Top
@Marduh-Top Автор вопроса
SEO-специалист, сайты на Modx Revo
в итоге спасибо Максим Зайцев сделал так и работает)
var owl = $("#owl-demo");
	owl.owlCarousel({
		items : 3,
		autoHeight : true,
		autoPlay: 3000,
		stopOnHover: true
	});
owl.on("mousewheel", ".owl-wrapper", function (e) {
    if (e.deltaY > 0) {
      owl.trigger("owl.prev");
    } else {
      owl.trigger("owl.next");
    }
    e.preventDefault();
  });
$(".next_button").click(function() {
    owl.trigger("owl.next");
  });
  $(".prev_button").click(function() {
    owl.trigger("owl.prev");
  });


var owl_1 = $("#owl-demo-1");
	owl_1.owlCarousel({
		items : 3,
		autoHeight : true,
		autoPlay: 2000,
		stopOnHover: true
	});
owl_1.on("mousewheel", ".owl-wrapper", function (e) {
    if (e.deltaY > 0) {
      owl_1.trigger("owl.prev");
    } else {
      owl_1.trigger("owl.next");
    }
    e.preventDefault();
  });
$(".next_button_zag").click(function() {
    owl_1.trigger("owl.next");
  });
  $(".prev_button_zag").click(function() {
    owl_1.trigger("owl.prev");
  });
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы