Вывод в swiper.js слайдере кастомных булетов

Специально для Артура, задающего вопрос в статье про swiper, привожу пример как вывести в swiper.js вместо штатных булетов навигации некие кастомные текстовые метки.

Swiper.js позволяет глубоко кастомизировать все свои элементы. Достаточно обратиться к документации, где мы найдем описание опции, позволяющей объявить свою функцию рендеринга булетов — renderBullet. Так можно вывести, то что нам требуется на практике.

Вот пример такого скрипта, который инициализирует наш слайдер:

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

Вот в общем и всё.

Написать комментарий

Мало букафф? Читайте есчо !

Как определить загружен ли определенный плагин для jQuery

Сентябрь 7, 2018 г.

Возможно ли проверить загружен или нет определенный jQuery плагин? Нет ничего проще! Самый краткий вариант проверки того, определен ли в текущий ...

Читать

Прерывание цикла jQuery функции $.each()

Ноябрь 17, 2018 г.

Часто использую функцию jQuery API each(), но иногда требуется досрочно прервать выполнение этого цикла. Итак, как выйти из $.each()? Обработка происходит внутри функции, и на выходе требуется сигнализировать API что делать дальше. Перебор элементов ...

Читать

 

Комментарии к «Вывод в swiper.js слайдере кастомных булетов»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий:

Много комментариев в “Вывод в swiper.js слайдере кастомных булетов”

  1. Артур:

    Огромное спасибо! Суть примерно понял! В коде получается SLIDE# + номер слайда. А если мне нужно что бы названия слайдов были например (пирог, вишня, лада и тп) то я просто делаю массив, и уже вместо slide# обращаюсь к нему? Но вот эта конструкция мне не совсем понятна, для чего она + className + ?

  2. VLad:

    А можно поподробней о том как сделать чтобы у каждого были свои названия?

    • Артур:

      Делаешь массив, а дальше каждому контейнеру из него значение забирай!

      var swiper = new Swiper(‘.swiper-container’, {

      navigation: {
      nextEl: ‘.swiper-button-next’,
      prevEl: ‘.swiper-button-prev’,
      },
      slidesPerView: ‘auto’,
      centeredSlides: true,
      spaceBetween: 30,
      speed:1300,
      pagination: {
      clickable: true,

      renderBullet: function (index, className) {
      var arr = new Array(«Текст1», «Текст2», «Текст3», «Текст4»);

      return ‘‘ + (arr[index]) + ‘‘;

      },

      el: ‘.swiper-pagination’,
      },
      keyboard: true,

      });

  3. Валерий:

    Добрый день! Помимо слайдера swiper на странице есть описание для каждого слайда, подскажите как сделать так, что бы при клике на описание слайда, слайдер переключался к слайду к которому относится описание, по аналогии с булетами(нажал на третий буллет — слайдер переключился на третий слайд и т. д.)