swiper 슬라이드를 쓰는데 페이징 커스텀

swiper 슬라이드를 쓰는데 페이징 커스텀 채택완료

김태후니 5년 전 조회 12,950

https://swiperjs.com/demos/070-pagination-custom.html">https://swiperjs.com/demos/070-pagination-custom.html

이 소스를 보니까 페이지네이션이 커스텀이 되더라구요.

저는 1~10까지 숫자가 아니라 특정 단어(예를 들어 apple, orange...)으로 하고 싶거든요.

근데 홈페이지에서 제시하는 예시 샘플은 숫자관련해서만 있어서, 어떻게 수정해야 할까요?

</p>

<p><!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>Swiper demo</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"></p>

<p>  <!-- Link Swiper's CSS -->

  <link rel="stylesheet" href="../package/css/swiper.min.css"></p>

<p>  <!-- Demo styles -->

  <style>

    html, body {

      position: relative;

      height: 100%;

    }

    body {

      background: #eee;

      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

      font-size: 14px;

      color:#000;

      margin: 0;

      padding: 0;

    }

    .swiper-container {

      width: 100%;

      height: 100%;

    }

    .swiper-slide {

      text-align: center;

      font-size: 18px;

      background: #fff;

      /* Center slide text vertically */

      display: -webkit-box;

      display: -ms-flexbox;

      display: -webkit-flex;

      display: flex;

      -webkit-box-pack: center;

      -ms-flex-pack: center;

      -webkit-justify-content: center;

      justify-content: center;

      -webkit-box-align: center;

      -ms-flex-align: center;

      -webkit-align-items: center;

      align-items: center;

    }

    .swiper-pagination-bullet {

      width: 20px;

      height: 20px;

      text-align: center;

      line-height: 20px;

      font-size: 12px;

      color:#000;

      opacity: 1;

      background: rgba(0,0,0,0.2);

    }

    .swiper-pagination-bullet-active {

      color:#fff;

      background: #007aff;

    }

  </style>

</head>

<body>

  <!-- Swiper -->

  <div class="swiper-container">

    <div class="swiper-wrapper">

      <div class="swiper-slide">Slide 1</div>

      <div class="swiper-slide">Slide 2</div>

      <div class="swiper-slide">Slide 3</div>

      <div class="swiper-slide">Slide 4</div>

      <div class="swiper-slide">Slide 5</div>

      <div class="swiper-slide">Slide 6</div>

      <div class="swiper-slide">Slide 7</div>

      <div class="swiper-slide">Slide 8</div>

      <div class="swiper-slide">Slide 9</div>

      <div class="swiper-slide">Slide 10</div>

    </div>

    <!-- Add Pagination -->

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

  </div></p>

<p>  <!-- Swiper JS -->

  <script src="../package/js/swiper.min.js"></script></p>

<p>  <!-- Initialize Swiper -->

  <script>

    var swiper = new Swiper('.swiper-container', {

      pagination: {

        el: '.swiper-pagination',

        clickable: true,

        renderBullet: function (index, className) {

          return '<span class="' + className + '">' + (index + 1) + '</span>';

        },

      },

    });

  </script>

</body>

</html></p>

<p>

swiper 슬라이드를 쓰는데 페이징 커스텀 채택완료

답변 1개

공유하기