Swiper js 스와이퍼 보이는 슬라이드 영역 정렬 문의드립니다.
안녕하세요.
Swiper cdn을 사용해서 스와이퍼를 제작던 중 해당 디자인처럼 구현이 되지않아 문의드립니다.
제가 생각하는 슬라이드의 형태는 액티브되는 슬라이드와 그 다음에 보여지는 슬라이드가 같이 중앙의 1400px의 영역에 보이고 1400px 영역을 중심으로 돌아가는 형태를 생각했습니다.
(스와이퍼의 전체의 영역은 100%)
http://sir.kr/data/editor/2409/238580039_1726056471.7391.png" width="100%" />
그런데 현재 구현되는 슬라이드의 형태는 아래의 형태입니다. http://sir.kr/data/editor/2409/238580039_1726056679.9048.jpg" width="100%" />
현재의 소스 코드는 아래의 내용입니다.
</strong></p>
<p><!DOCTYPE html></p>
<p><html lang="ko"></p>
<p><head></p>
<p> <meta charset="UTF-8"></p>
<p> <meta name="viewport" content="width=device-width, initial-scale=1.0"></p>
<p> <title>Document</title></p>
<p> </p>
<p> <!-- RESET CSS --></p>
<p> <link href="<a href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css"" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css"</a> rel="stylesheet" /></p>
<p> </p>
<p> <style></p>
<p> .promotion .swiper{</p>
<p> </p>
<p> }</p>
<p> .promotion .swiper .swiper-wrapper{</p>
<p> width: 1400px;</p>
<p> margin: 0 auto;</p>
<p> background-color: yellow;</p>
<p> }</p>
<p> .promotion .swiper .swiper-wrapper .swiper-slide{</p>
<p> width: 699px;</p>
<p> height: 644px;</p>
<p> background-color:pink;</p>
<p> opacity: .8;</p>
<p> }</p>
<p> </style></p>
<p></head></p>
<p><body></p>
<p> <section class="promotion"></p>
<p> <div class="swiper"></p>
<p> <div class="swiper-wrapper"></p>
<p> <div class="swiper-slide">Slide 1</div></p>
<p> <div class="swiper-slide">Slide 2</div></p>
<p> <div class="swiper-slide">Slide 3</div></p>
<p> <div class="swiper-slide">Slide 4</div></p>
<p> <div class="swiper-slide">Slide 5</div></p>
<p> <div class="swiper-slide">Slide 6</div></p>
<p> <div class="swiper-slide">Slide 7</div></p>
<p> <div class="swiper-slide">Slide 8</div></p>
<p> <div class="swiper-slide">Slide 9</div></p>
<p> </div></p>
<p> </div></p>
<p> </section></p>
<p> </p>
<p> <!-- SWIPER --></p>
<p> <link rel="stylesheet" href="<a href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"</a> /></p>
<p> <script src="<a href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script></a></p>
<p> </p>
<p> <script></p>
<p> new Swiper ('.promotion .swiper', {</p>
<p> spaceBetween:1,</p>
<p> slidesPerView:'auto',</p>
<p> loop:true,</p>
<p> });</p>
<p> </script></p>
<p></body></p>
<p></html></p>
<p><strong>
부탁드립니다.!!
답변 1개
옵션중에 한번에 이동하는 슬라이더 갯수가 있습니다.
slidesPerGroup: 2,
https://ktsmemo.cafe24.com/s/SwiperJS/367
참고하셔서 수정하세요.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인