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

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

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

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

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

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

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

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

Встраиваем в форму drug-n-drop загрузчик файлов

Май 8, 2017 г.

Загрузка файлов, наверное, самая сложная тема при работе с формами в веб-приложениях. Стандартный элемент формы <input> для загрузки файла, его внешний ...

Читать

Формирование связанных списков select произвольной вложенности

Декабрь 11, 2016 г.

Не ослабевает интерес к вопросу о динамическом создании связанных выпадающих HTML списков. Для двух зависимых списков (я публиковал пример более 5 лет назад!) ситуация простая и понятная, но люди задают вопрос - а как развить пример для вложения 3х списков? ...

Читать

 

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

      });