Хочу добавить в span
уникальный контент, как здесь на картинке:
как это сделать?
Небольшой пример, можете под себя доработать
При подготовке примера использовался swiper 5.3.7 - API
var menu = ['North Shore', 'South Shore', 'West Shore', 'East Shore']
window.onload = function() {
var mySwiper = new Swiper('.swiper-container', {
// loop: true,
slidesPerView: 1,
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet: function(index, className) {
return '\
<div class="box ' + className + '">\
<div class="bigNumber">' + (index < 10 ? '0' + (index + 1) : (index + 1)) + '</div>\
<div class="text">' + (menu[index]) + '</div>\
</div>';
},
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
})
};
.swiper-container {
width: 100%;
height: 180px;
background: #222;
color: #fff;
font-family: arial;
}
.swiper-slide img {
width: 100%;
}
.swiper-pagination {
padding: 0;
display: flex;
width: 100%;
margin: 0;
color: #aaa;
}
.swiper-pagination .box {
border-radius: 0;
background: transparent;
font-size: 12px;
width: 25%;
height: 30px;
display: flex;
align-items: center;
justify-content: space-between;
}
.swiper-pagination-bullet {
margin: 10px !important;
border-top: 3px solid;
border-top-color: #aaa;
opacity: 1 !important;
}
.swiper-pagination-bullet .bigNumber {
font-size: 16px;
margin-right: 20px;
font-weight: 800;
color: #fff;
}
.swiper-pagination-bullet-active {
border-top-color: #4af6cd;
}
.arrow,
.swiper-pagination-bullet-active .bigNumber,
.swiper-pagination-bullet-active .text {
color: #4af6cd !important;
}
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="https://swiperjs.com/images/share-banner-new.png" alt="test image"></div>
<div class="swiper-slide"><img src="https://swiperjs.com/images/share-banner-new.png" alt="test image"></div>
<div class="swiper-slide"><img src="https://swiperjs.com/images/share-banner-new.png" alt="test image"></div>
<div class="swiper-slide"><img src="https://swiperjs.com/images/share-banner-new.png" alt="test image"></div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev arrow"></div>
<div class="swiper-button-next arrow"></div>
</div>