Специально для Артура, задающего вопрос в статье про 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 + === разобрался с этой штукой, не увидел что в вызове функи она стоит!
С меня пиво! Скажи куда кинуть…
Да выпей за моё здоровье :)
А можно поподробней о том как сделать чтобы у каждого были свои названия?
Делаешь массив, а дальше каждому контейнеру из него значение забирай!
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,
});