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

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

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

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

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

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

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

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

Исправление плагина jquery.jslider.js

Июнь 8, 2017 г.

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

Читать

Прерывание цикла 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 на странице есть описание для каждого слайда, подскажите как сделать так, что бы при клике на описание слайда, слайдер переключался к слайду к которому относится описание, по аналогии с булетами(нажал на третий буллет — слайдер переключился на третий слайд и т. д.)

  4. Tim:

    почему у меня такая пагинация остается на первом слайде?