Как можно сделать два слайдера owl carousel взаимосвязанными и работающими синхронно?

Question

Наум

слайдер , javascript , owl , программирование

Как можно сделать два слайдера owl carousel взаимосвязанными и работающими синхронно?

Как можно сделать так, чтобы два слайдера в интернет-магазине, "Новинки" и "Бестселлеры", автоматически переключали слайды синхронно, а не асинхронно, чтобы создать более естественное и гармоничное визуальное восприятие? Найденный вами код синхронизирует работу второго слайдера с изменениями первого. Как доработать этот код, чтобы первый слайдер также реагировал на изменения второго? Какая корректировка нужна в предоставленном коде? [Ссылка на Codepen](https://codepen.io/saint-laurent/pen/ZEdOrNW)

23 июля 2024 г. 8:22

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для того чтобы сделать два слайдера owl carousel взаимосвязанными и работающими синхронно, нужно добавить следующий код:

```javascript
var sync1 = $('.new-slider');
var sync2 = $('.best-slider');

sync1.owlCarousel({
  items: 1,
  loop: true,
  margin: 10,
  nav: true,
  dots: false,
  navText: ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
}).on('changed.owl.carousel', function (e) {
  if (e.namespace && e.property.name === 'position') {
    var syncPosition = sync2.trigger('to.owl.carousel', [e.item.index, 300, true]);
  }
});

sync2.owlCarousel({
  items: 1,
  loop: true,
  margin: 10,
  nav: true,
  dots: false,
  navText: ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
}).on('changed.owl.carousel', function (e) {
  if (e.namespace && e.property.name === 'position') {
    var syncPosition = sync1.trigger('to.owl.carousel', [e.item.index, 300, true]);
  }
});
```

В этом коде мы инициализируем два слайдера – `sync1` и `sync2`, задаем им параметры и добавляем обработчики события `changed.owl.carousel`, которые будут синхронизировать изменения между слайдерами.

Теперь оба слайдера будут работать синхронно, автоматически переключая слайды друг за другом.

Answer 2

Судя по вашему вопросу, вам подойдет вот такое простое и элегантное, как удар лома, решение: скопируйте ваш готовый код и поменяйте в копии местами идентификаторы слайдеров. Правда, я сам код не видел, так что предупреждаю сразу - возможно возникнет обратная связь и слайдеры начнут жить своей жизнью) 
 
 Если вам надо просто сделать автоматическую синхронную прокрутку, то я бы рекомендовал другое решение: отключите автопрокрутку в слайдерах и повесьте на таймер свой код, который будет вызывать нужные методы для каждого слайдера через заданный интервал времени.