Специально для Артура, задающего вопрос в статье про swiper, привожу пример как вывести в swiper.js вместо штатных булетов навигации некие кастомные текстовые метки.
Swiper.js позволяет глубоко кастомизировать все свои элементы. Достаточно обратиться к документации, где мы найдем описание опции, позволяющей объявить свою функцию рендеринга булетов — renderBullet. Так можно вывести, то что нам требуется на практике.
Вот пример такого скрипта, который инициализирует наш слайдер:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> jQuery(function($) { $('.swiper-container').each(function(index, value) { var mySwiper = new Swiper(value, { autoplay: { delay: 3500, }, slidesPerView: 'auto', pagination: { clickable: true, renderBullet: function (index, className) { return '<span class="' + className + '">Slide # ' + (index + 1) + '</span>'; }, el: '.swiper-pagination', }, }); }); }); </script> |
Добавим немного корректирующих стилей в код, чтобы убрать базовое оформление:
|
1 2 3 4 5 6 |
<style> .swiper-pagination-bullet { width: auto; background: transparent; } </style> |
Вот в общем и всё.
Огромное спасибо! Суть примерно понял! В коде получается SLIDE# + номер слайда. А если мне нужно что бы названия слайдов были например (пирог, вишня, лада и тп) то я просто делаю массив, и уже вместо slide# обращаюсь к нему? Но вот эта конструкция мне не совсем понятна, для чего она + className + ?
+ className + === разобрался с этой штукой, не увидел что в вызове функи она стоит!