G
G
Gera112020-09-05 15:06:21
JavaScript
Gera11, 2020-09-05 15:06:21

How to link multiple owl.js carousels?

There is such a carousel owl
carousel I installed 3 carousels on the site. One of them has buttons (nav: true).
How can I make it so that when the first carousel is scrolled, all the others are scrolled as well? To scroll through and by clicking on the arrows and when scrolling with a finger from the phone?

Now I only work with arrows:

$(document).ready(function(){
    $('.compares').owlCarousel({
        loop:false,
        navText : ['<i class="fas fa-chevron-left"></i>','<i class="fas fa-chevron-right"></i>'],
        margin:30,
        nav:true,
        touchDrag:false,
        mouseDrag:false,
        dots:false,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:3
            },
            1000:{
                items:5
            }
        }
    });
    $('.compares1').owlCarousel({
        loop:false,
        margin:30,
        nav:false,
        touchDrag:false,
        mouseDrag:false,
        dots:false,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:3
            },
            1000:{
                items:5
            }
        }
    });
    var owl = $('.compares');
    var owl1 = $('.compares1');
    owl.owlCarousel();
    owl1.owlCarousel();
    $('.owl-next').click(function() {
    		owl.trigger('next.owl.carousel');
    		owl1.trigger('next.owl.carousel');
    });
    $('.owl-prev').click(function() {
    		owl.trigger('prev.owl.carousel', [300]);
    		owl1.trigger('prev.owl.carousel', [300]);
    });
  });

Answer the question

In order to leave comments, you need to log in

2 answer(s)
L
Lord_Dantes, 2020-09-05
@Lord_Dantes

https://owlcarousel2.github.io/OwlCarousel2/docs/a...
The first example, listening to the carousel scrolling and doing what we need.

A
Andy Oker, 2020-09-05
@Ashlis

This is how I do it - https://codepen.io/AshleyNord/pen/qBZpEPy
I listen for the "changed" event and add the appropriate hash to the page url.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question