A
A
Alexander Zdorov2016-01-18 12:49:59
JavaScript
Alexander Zdorov, 2016-01-18 12:49:59

Multiple owl carousel, how to separate control buttons?

multiple owl carousels are defined on the page, separating them in the script using id.
Here is the html structure

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

and this is 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
  });

on one of the sites, an example of "delegating" to your navigation elements for the carousel was given
, as a result, I added the first one to the script
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
  });

When adding a second carousel, the buttons instead of the first one start working for the second
one in the scripts, a complete zero, following the example I made one, everything worked, but as the second one I added, but that's all ...
help how to divide the control buttons into their groups with a script

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alexander Zdorov, 2016-01-18
@Marduh-Top

in the end, thanks to Maxim Zaitsev , he did it and it works)

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");
  });

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question