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