1

Хочу добавить в span уникальный контент, как здесь на картинке:

введите сюда описание изображения

введите сюда описание изображения

как это сделать?

введите сюда описание изображения

1 ответ 1

2

Небольшой пример, можете под себя доработать

При подготовке примера использовался 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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.