1

Есть слайдер vue-slick, состоящий из 5 слайдов. При его просмотре (с помощью стрелок), номер слайда должен отображаться рядом с dots в виде 1/5. На просторах интернета такой пример инициализации плагина:

{
  dots: true,
  customPaging: function (slider, i) {
    return slider.slickCurrentSlide + '/' + (i + 1);
  }
}

Но данный вариант мне не подходит, поскольку это заменяет мои dots на числа.

Есть иные способы реализации подобного?

2
  • Что вы спросили и причем тут vue.js ?
    – zalex
    3 июл 2019 в 8:45
  • в вопросе указал, что используется slick как компонент vue (vue-slick как пакет). логично же , что нигде, кроме как во вью он использоваться не будет? репутации не хватает, чтобы создать соответствующую метку
    – Valdemar
    3 июл 2019 в 8:56

1 ответ 1

0

Плагин vue-slick - это обертка для jQuery плагина slick-carousel, который при инициализации принимает те же параметры и включает в себя практически все события, при возникновении которых можно создавать свои обработчики.

В вашем случае вместо хука customPaging, который формирует пользовательские кнопки dots, можно использовать событие afterChange, с тремя аргументами в функции обратного вызова:

  • event - событие;
  • slick - экземпляр слайдера
  • currentSlide - номер текущего слайда.

// Отключим ненужные для примера
// сообщения в консоли.
Vue.config.productionTip = false;
Vue.config.devtools = false;

// Дочерний компонент экземпляра Vue.
const Demo = {
  // Локальная регистрация компонентов.
  components: {
    // Для демки компонент назван так.
    // У вас по-другому может быть:
    // 'slick': Slick
    'slick': vueSlickCarousel
  },
  data() {
    return {
      slickOptions: {
        // Настройки для плагина.
        // https://github.com/kenwheeler/slick/#settings
        autoplay: true, // автолистание слайдов
        dots: true, // показывать `точки`
        arrows: false, // скрыть стрелки
        fade: true, // плавность перехода
        /**
         * С помощью этого хука каждая кнопка
         * будет заменена на изображение.
         * Если не нужно, то удалите.
         */
        customPaging: function(slick, index) {
          // Доступ к элементам через методы jQuery.
          let image = slick.$slides.eq(index).find('img').attr('src');

          return `<img src="${image}" />`;
        }
      }
    }
  },

  methods: {
    /**
     * Обработчики событий для плагина `vue-slick`,
     * созвучны с событиями слайдера `slick`, и
     * принимающие те же аргументы.
     * https://github.com/kenwheeler/slick/#events
     * https://github.com/staskjs/vue-slick/#installation-and-usage
     */

    // Хук, срабатывающий при инициализации слайдера `slick`.
    handleInit(event, slick) {
      slick.$dots.before(`<center><strong><span>1</span>/${slick.slideCount}</strong></center>`)
    },

    // Хук, срабатывающий при инициализации после изменения слайда.
    handleAfterChange(event, slick, currentSlide) {
      // Также имеется доступ к элементам слайдера через нативные методы JavaScript.
      event.target.querySelector('strong span').textContent = currentSlide + 1;
    }
  },

  // Шаблон компонента.
  template: `<slick ref="slick" class="slider" :options="slickOptions" @init="handleInit" @afterChange="handleAfterChange">
    <img src="https://via.placeholder.com/600x300/ff9ff3/FFFFFF?text=Изображение+1" />
    <img src="https://via.placeholder.com/600x300/feca57/FFFFFF?text=Изображение+2" />
    <img src="https://via.placeholder.com/600x300/ff6b6b/FFFFFF?text=Изображение+3" />
    <img src="https://via.placeholder.com/600x300/48dbfb/FFFFFF?text=Изображение+4" />
    <img src="https://via.placeholder.com/600x300/1dd1a1/FFFFFF?text=Изображение+5" />
  </slick>`
}

// Создаем экземпляр приложения.
new Vue({
  // Корневой элемент, определяется по css селектору.
  el: '#app',
  // Локальная регистрация компонентов.
  components: {
    'demo': Demo
  }
});
.container {
  max-width: 600px;
  margin: 10px auto;
  position: relative;
}

.container img {
  width: 100%;
  height: auto;
}

.slick-dots {
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0 -8px;
}

.slick-dots li {
  list-style: none;
  display: inline-block;
  margin: 8px;
  cursor: pointer;
}

.slick-dots li button {
  border: 1px solid #08c;
  background: none;
  color: #08c;
  padding: 8px 12px;
  outline: none;
}
<div id="app" class="container" v-cloak>
  <demo></demo>
</div>

<!-- Гремучая смесь плагинов и библиотек -->
<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/slickCarousel.umd.min.js"></script>

7
  • все ок, но при свайпе слайдера выходит ошибка Cannot set property 'textContent' of null. В консоли раз-ка слудующее: TypeError: Cannot set property 'textContent' of null at VueComponent.handleAfterChange (Portfolio.js:424),at invokeWithErrorHandling (commons.app.js:11391),at VueComponent.invoker (commons.app.js:11716),at invokeWithErrorHandling (commons.app.js:11391),at VueComponent.Vue.$emit (commons.app.js:13414),at VueComponent.onAfterChange (vendors.app.js:15254)
    – Valdemar
    9 июл 2019 в 8:55
  • единственное, что изменил в этом моменте, так это добавил класс. Самое интересное, что такая проблема произошла после того, как я ресайз вешаю. при ресайзе экрана до мобилки меняется отображение слайдера, именно при таком разрешении, пытаясь свайпать слайды, у меня возникает эта ошибка. При обычном отображении такого нет. Буду разбираться, спасибо
    – Valdemar
    9 июл 2019 в 9:12
  • понял, в чем ошибка. внутри опции responsive я прописываю breakpoint с шириной, при какой у меня будут немного меняться настройки у слайдера. Функции спотыкаются на этом моменте. наткнулся еще на данный ресурс: github.com/kenwheeler/slick/issues/542, где обсуждается аналогичная моей проблема. Пока решения не нашел
    – Valdemar
    9 июл 2019 в 10:56
  • 1
    Попробуйте функцию немного видоизменить: handleAfterChange(event, slickCarousel, currentSlide) { if(event.target.querySelector("strong span") === null) { return; } event.target.querySelector("strong span").textContent = currentSlide + 1; }
    – nbelle
    9 июл 2019 в 11:06
  • @nbelle сработало! Спасибо!
    – Valdemar
    9 июл 2019 в 11:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.