Может кто-то знает, как сделать пагинацию такого вида? swiper

Question

Как сделать чтобы пагинация была на уменьшение

document.querySelectorAll('.events__swiper').forEach(el => {
    let swiper = new Swiper(el, {

    loop: true,
    pagination: {
      el: el.querySelector('.events-pagination'),
      clickable: true
    },
     navigation: {
        nextEl: el.querySelector('.events-next'),
        prevEl: el.querySelector('.events-prev')
     }

    });
});

.swiper-slide img {
    max-width: 400px;
}

<link href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
                        <div class="swiper events__swiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                                                      <img src="https://get.wallhere.com/photo/3840x2160-px-mountain-1327909.jpg" alt="wdsd">
                                </div>
                                <div class="swiper-slide">
                                                                    <img src="https://get.wallhere.com/photo/3840x2160-px-mountain-1327909.jpg" alt="wdsd"></div>
                                <div class="swiper-slide">
                                                                    <img src="https://get.wallhere.com/photo/3840x2160-px-mountain-1327909.jpg" alt="wdsd"></div>
                            </div>
                                                            <div class="swiper-slide">
                                                                    <img src="https://get.wallhere.com/photo/3840x2160-px-mountain-1327909.jpg" alt="wdsd"></div>
                            </div>
                            <div class="events-pagination"></div>
                          
                            <div class="events-prev"></div>
                            <div class="events-next"></div>
                          
                        </div>

Answer 1

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .swiper {
      width: 600px;
      height: 300px;
    }
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .swiper-pagination-bullet {
      background-color: gray;
      opacity: 1;
      width: 12px;
      height: 12px;
    }
    
    .swiper-pagination-bullet-active {
      background-color: white;
    }
    
    .swiper-button-prev,
    .swiper-button-next {
      top: initial;
      bottom: 8px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background-color: rgba(128, 128, 128, .75);
    }
    
    .swiper-button-prev::after,
    .swiper-button-next::after {
      font-size: 12px;
    }
    
    .swiper-button-prev:hover,
    .swiper-button-next:hover {
      background-color: rgba(255, 255, 255, .75);
    }
  </style>
</head>

<body>

  <div class="swiper events__swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="https://get.wallhere.com/photo/3840x2160-px-mountain-1327909.jpg" alt="wdsd">
      </div>
      <div class="swiper-slide">
        <img src="https://get.wallhere.com/photo/3840x2160-px-mountain-1327909.jpg" alt="wdsd">
      </div>
      <div class="swiper-slide">
        <img src="https://get.wallhere.com/photo/3840x2160-px-mountain-1327909.jpg" alt="wdsd">
      </div>
      <div class="swiper-slide">
        <img src="https://get.wallhere.com/photo/3840x2160-px-mountain-1327909.jpg" alt="wdsd">
      </div>
    </div>

    <div class="swiper-pagination"></div>

    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>

  <script>
    const swiper = new Swiper('.swiper', {
      // loop: true,

      pagination: {
        el: '.swiper-pagination',
        dynamicBullets: true,
        dynamicMainBullets: 1,
      },

      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>
</body>

</html>

БЛОГ НА HUSL

Может кто-то знает, как сделать пагинацию такого вида? swiper

Ответы (1 шт):