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

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

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

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

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

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

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

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

Подключаем fancybox в Drupal 6

Сентябрь 1, 2013 г.

Fancybox - известный плагин jQuery для создания эффекта "просмотра в окошке". Давайте подключим его в 6-ю версию Drupal. Ряд "деятелей" предлагают поставить для этой цели, кроме самой библиотеки, ещё два плагина - jquery_update и fancybox. Определенный ...

Читать

Обмен данных Angular с бек-энд на PHP

Ноябрь 11, 2016 г.

Стоит ли рассказывать, что Ангуляр при всей своей прелести лишь одна сторона медали - frontend, который как то должен взаимодействовать со второй половинкой ...

Читать

 

Комментарии к «Вывод в 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:

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