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

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

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

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

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

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

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

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

Фильтр только по нужному столбцу в Angular

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

Продолжая тему работы с ng-repeat в Ангуляр фреймворк, хочу рассказать о том, как работать с кастомными фильтрами. Можно вернуться к примеру в прошлой ...

Читать

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

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

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

Читать

 

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

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



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

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

  1. Артур:

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