swiper 슬라이더 질문드립니다..

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

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

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

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

<style>

.swiper-container {width:600px; height:300px;}

.swiper-slide {text-align:center/* 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 {font-size:1em; font-weight:700; padding-left:30px; color:#A7A7A7}

.swiper-pagination-bullet-active {font-size:1em; font-weight:700; padding-left:30px; color:#1b1b1b; text-decoration:underline; text-underline-position:under;}

</style>

<!-- Add Pagination -->

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

<!-- Swiper -->

<div class="swiper-container">

<div class="swiper-wrapper">

<div class="swiper-slide">a1</div>

<div class="swiper-slide">a2</div>

</div>

</div>

</div>

  <!-- Swiper JS -->

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

  <!-- Initialize Swiper -->

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

  <script>

// 페이지 네비게이션 배열지정

var myArray = ["Best","Best","New"];

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

      pagination: {

        el: '.swiper-pagination',

        clickable: true,

        renderBullet: function (index, className) {

          return '<span class="' + className + '">' + myArray[index + 1] + '</span>';

        },

      },

    });

  </script>

이렇게 하고 나면 하단처럼 출력이 됩니다..

도대체 왜 이렇게 나오는 걸까요..

원래 a1은 best를 눌러야만 나오는 것이고

a2는 new를 눌러야만 나와야 합니다..

코딩 진도가 더뎌지고 있어서 너무 힘든데 해결이 잘 안되고 있어서 더 힘든것 같습니다ㅠㅠ

무엇을 잘못한 걸까요..