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

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

QA

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>

 

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

 

1893563930_1600849232.2403.jpg

 

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

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

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

 

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

무엇을 잘못한 걸까요..

이 질문에 댓글 쓰기 :

답변 3

  <!-- Swiper JS -->

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

 

  <!-- Initialize Swiper -->

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

 

아래에 있는 것은 지우고  ../package 아래에 파일이 있는지 확인해 보세요

가장 쉬운단계부터 하나씩 차근차근 올라가는 것을 추천합니다.

 

1) 데모 소스 그대로 작성한 후 -> 브라우저에서 정상 작동하는 지 확인합니다.

 

2) 필요로 하는 수정부분 중 일부를 적용 -> 브라우저에서 확인합니다.

 

3) 필요로 하는 수중부분 중 일부를 적용 -> 브라우저에서 확인합니다.

 

...

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

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

이렇게 변경해 보세요

css 문제 때문인 것 같아요

답변을 작성하시기 전에 로그인 해주세요.
전체 123,126 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT