среда, 19 октября, 2016 - 14:58

У owlcarousel 1.x есть баг опция loop (зацикленный слайдер) работает мягко говоря не правильно можете сами посмотреть ;).

Именно её мы и исправим.

Пару слов что делает скрипт ниже.

  • Немного ждёт пока owl инициализируется.
  • Ищет все слайды на страницы, конечно лучше было указывать только те слайдеры где есть loop.
  • Клонирует все слайды и добавляет их в начале и в конце слайдера n раз (указываем количество в переменной repetition).
  • Переносит каретку слайдера в середину.
  • Так как у нас слайдов не бесконечное число, после смены слайда переносит каретку снова в середину, что бы пользователь не заметил ;)
(function ($, Drupal, window, document, undefined) {
  Drupal.behaviors.owlcarousel_loop = {
    attach: function (context, settings) {
      setTimeout(function () {
        $('body').once('owlcarousel-repetition', function () {
          var repetition = 1;
          var $owl = $('.owl-carousel', context);
          var owl = $owl.data('owlCarousel');
          var $items = $('.owl-item', $owl).clone();
          var size = $items.size();

          if (size && $owl.size()) {
            for (var i = 0; i < repetition * 2; i++) {
              $items.map(function (index) {
                owl.addItem($(this).html());
              });
            }

            owl.reinit({
              afterMove: function () {
                var start = repetition * size;
                var stop = repetition * size + size - 1;
                var owl = this;

                if (owl.currentItem < start || owl.currentItem > stop) {
                  setTimeout(function () {
                    owl.jumpTo(owl.currentItem % size + start);
                  }, 100);
                }
              }
            });

            owl.jumpTo(repetition * size);
          }
        });
      }, 0);
    };
  })
(jQuery, Drupal, this, this.document);

Надеюсь данный скрипт сэкономит время на ваших сайтах.

П.С.
На данным момент есть уже owlcarousel 2.x в котором много нового, но мне лично лень переделывать на сайте все слайды.

Добавить комментарий

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.