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

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

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

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

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

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

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

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

Копируем в буфер обмена средствами javascript

Февраль 25, 2017 г.

Такая задача возникает не часто, но если вы заботитесь о пользователе, и помогаете ему скопировать в буфер обмена нужную информацию - то пользователь будет вам признателен. Так вы заработаете ещё один плюсик в копилку "юзабилити". Разберем ключевые ...

Читать

Обработка события click или touchstart

Октябрь 31, 2018 г.

Широкое применение мобильных устройств для доступа в интернет накладывает свои специфические требования на разработку веб-сайтов. Привычный обработчик onclick может срабатывать совместно с ontouchstart, а может не срабатывать вовсе на мобильном устройстве. ...

Читать

 

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