Here are 2 roundabouts: https://jsfiddle.net/hhnq8a26/1/ How to make it so that when you press the prev button (the red background) of one of them, both roundabouts are turned over at once. Both roundabouts can be in different blocks far from each other. clicked on the scroll button and scrolls 2 roundabouts

$(document).ready(function() { $('.owl-carousel').owlCarousel({ loop:true, margin:10, nav:true, responsive:{ 0:{ items:1 }, 600:{ items:3 }, 1000:{ items:5 } } }) }); 
 .q1 .owl-prev { background: red; } 
 <div class="owl-carousel q1"> <div class="item"><h4>1</h4></div> <div class="item"><h4>2</h4></div> <div class="item"><h4>3</h4></div> <div class="item"><h4>4</h4></div> <div class="item"><h4>5</h4></div> <div class="item"><h4>6</h4></div> <div class="item"><h4>7</h4></div> <div class="item"><h4>8</h4></div> <div class="item"><h4>9</h4></div> <div class="item"><h4>10</h4></div> <div class="item"><h4>11</h4></div> <div class="item"><h4>12</h4></div> </div> <div class="owl-carousel"> <div class="item"><h4>1</h4></div> <div class="item"><h4>2</h4></div> <div class="item"><h4>3</h4></div> <div class="item"><h4>4</h4></div> <div class="item"><h4>5</h4></div> <div class="item"><h4>6</h4></div> <div class="item"><h4>7</h4></div> <div class="item"><h4>8</h4></div> <div class="item"><h4>9</h4></div> <div class="item"><h4>10</h4></div> <div class="item"><h4>11</h4></div> <div class="item"><h4>12</h4></div> </div>

  • Crutch, imitate a click by clicking on the second carousel, when you press the button first. - Sergey Novikov
  • with trigger freezes occur - Artem PeGaS

2 answers 2

It is enough to add custom buttons and trigger them on triggers:

 var owl = $('.owl-carousel'); owl.owlCarousel({ loop: true, margin: 10, nav: false, responsive: { 0: { items: 1 }, 600: { items: 3 }, 1000: { items: 5 } } }); $('.go-prev').click(function() { owl.trigger('prev.owl.carousel'); }); $('.go-next').click(function() { owl.trigger('next.owl.carousel'); }); 
 <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> <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" rel="stylesheet" /> <div class="owl-carousel q1"> <div class="item"> <h4>1</h4> </div> <div class="item"> <h4>2</h4> </div> <div class="item"> <h4>3</h4> </div> <div class="item"> <h4>4</h4> </div> <div class="item"> <h4>5</h4> </div> <div class="item"> <h4>6</h4> </div> <div class="item"> <h4>7</h4> </div> <div class="item"> <h4>8</h4> </div> <div class="item"> <h4>9</h4> </div> <div class="item"> <h4>10</h4> </div> <div class="item"> <h4>11</h4> </div> <div class="item"> <h4>12</h4> </div> </div> <div class="owl-carousel q2"> <div class="item"> <h4>1</h4> </div> <div class="item"> <h4>2</h4> </div> <div class="item"> <h4>3</h4> </div> <div class="item"> <h4>4</h4> </div> <div class="item"> <h4>5</h4> </div> <div class="item"> <h4>6</h4> </div> <div class="item"> <h4>7</h4> </div> <div class="item"> <h4>8</h4> </div> <div class="item"> <h4>9</h4> </div> <div class="item"> <h4>10</h4> </div> <div class="item"> <h4>11</h4> </div> <div class="item"> <h4>12</h4> </div> </div> <div class="go-prev">prev</div> <div class="go-next">next</div>

If you also need synchronous scrolling, for example, with drag or mousewheel (if any) event'ah, I can recommend the addition of Owl Linked , which allows you to link several carousels to each other:

 ! function(e, t, o, i) { var n = function(t) { this._core = t, this._handlers = { "dragged.owl.carousel changed.owl.carousel": e.proxy(function(e) { e.namespace && this._core.settings.linked && this.update(e) }, this), "linked.to.owl.carousel": e.proxy(function(e, t, o, i, n) { e.namespace && this._core.settings.linked && this.toSlide(t, o, n) }, this) }, this._core.$element.on(this._handlers), this._core.options = e.extend({}, n.Defaults, this._core.options) }; n.Defaults = { linked: !1 }, n.prototype.update = function(e) { this.toSlide(e.relatedTarget.relative(e.item.index)) }, n.prototype.toSlide = function(t, o, i) { var n = (this._core.$element.attr("id"), this._core.settings.linked.split(",")); "undefined" == typeof i && (i = !0), t = t || 0, i ? e.each(n, function(o, i) { e(i).trigger("linked.to.owl.carousel", [t, 300, !0, !1]) }) : (this._core.$element.trigger("to.owl.carousel", [t, 300, !0]), this._core.settings.current && this._core._plugins.current.switchTo(t)) }, n.prototype.destroy = function() { var e, t; for (e in this._handlers) this.$element.off(e, this._handlers[e]); for (t in Object.getOwnPropertyNames(this)) "function" != typeof this[t] && (this[t] = null) }, e.fn.owlCarousel.Constructor.Plugins.linked = n }(window.Zepto || window.jQuery, window, document); var owl = $('.owl-carousel'); owl.owlCarousel({ loop: true, margin: 10, nav: false, linked: '.q1, .q2', responsive: { 0: { items: 1 }, 600: { items: 3 }, 1000: { items: 5 } } }); $('.go-prev').click(function() { owl.trigger('prev.owl.carousel'); }); $('.go-next').click(function() { owl.trigger('next.owl.carousel'); }); 
 <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> <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" rel="stylesheet" /> <div class="owl-carousel q1"> <div class="item"> <h4>1</h4> </div> <div class="item"> <h4>2</h4> </div> <div class="item"> <h4>3</h4> </div> <div class="item"> <h4>4</h4> </div> <div class="item"> <h4>5</h4> </div> <div class="item"> <h4>6</h4> </div> <div class="item"> <h4>7</h4> </div> <div class="item"> <h4>8</h4> </div> <div class="item"> <h4>9</h4> </div> <div class="item"> <h4>10</h4> </div> <div class="item"> <h4>11</h4> </div> <div class="item"> <h4>12</h4> </div> </div> <div class="owl-carousel q2"> <div class="item"> <h4>1</h4> </div> <div class="item"> <h4>2</h4> </div> <div class="item"> <h4>3</h4> </div> <div class="item"> <h4>4</h4> </div> <div class="item"> <h4>5</h4> </div> <div class="item"> <h4>6</h4> </div> <div class="item"> <h4>7</h4> </div> <div class="item"> <h4>8</h4> </div> <div class="item"> <h4>9</h4> </div> <div class="item"> <h4>10</h4> </div> <div class="item"> <h4>11</h4> </div> <div class="item"> <h4>12</h4> </div> </div> <div class="go-prev">prev</div> <div class="go-next">next</div>

    Hi =)

     $(document).ready(function() { let owl = $('.owl-carousel').owlCarousel({ loop: true }); let carousel1 = $('.carousel1').owlCarousel({ loop: true }); let carousel2 = $('.carousel2').owlCarousel({ loop: true }); $(".nav-left-red").click(function () { owl.trigger('prev.owl.carousel'); }); $(".nav-left-carousel2").click(function () { carousel2.trigger('prev.owl.carousel'); }); $(".nav-right-carousel2").click(function () { carousel2.trigger('next.owl.carousel'); }); $(".nav-left-carousel1").click(function () { carousel1.trigger('prev.owl.carousel'); }); $(".nav-right-carousel1").click(function () { carousel1.trigger('next.owl.carousel'); }); });

    The first carousel:

     <div class="owl-carousel q1"> <div class="item"><h4>1</h4></div> <div class="item"><h4>2</h4></div> <div class="item"><h4>3</h4></div> <div class="item"><h4>4</h4></div> <div class="item"><h4>5</h4></div> <div class="item"><h4>6</h4></div> <div class="item"><h4>7</h4></div> <div class="item"><h4>8</h4></div> <div class="item"><h4>9</h4></div> <div class="item"><h4>10</h4></div> <div class="item"><h4>11</h4></div> <div class="item"><h4>12</h4></div> </div> <button class=""nav-left-red owl-prev">prev</button> <button class="nav-right-carousel1">next</button>

    The second carousel:

     <div class="owl-carousel"> <div class="item"><h4>1</h4></div> <div class="item"><h4>2</h4></div> <div class="item"><h4>3</h4></div> <div class="item"><h4>4</h4></div> <div class="item"><h4>5</h4></div> <div class="item"><h4>6</h4></div> <div class="item"><h4>7</h4></div> <div class="item"><h4>8</h4></div> <div class="item"><h4>9</h4></div> <div class="item"><h4>10</h4></div> <div class="item"><h4>11</h4></div> <div class="item"><h4>12</h4></div> </div> <button class="nav-left-carousel2">prev</button> <button class="nav-right-carousel2">next</button>

    Styles:

     .owl-prev { background: red; }

    The idea should work as you want: https://jsfiddle.net/hhnq8a26/15/