Effect coverflow 스와이퍼 적용
본문
스와이퍼 데모 사이트에서
Effect coverflow를 적용했는데요
기존엔 9장으로 돌아가는걸로 되어있어
5장을 더 추가하자니 뒤에 5장은 찌그러져서 안보이네요
추가하는 방법이 있을까요?
body태그 안쪽 코드 첨부합니다
<body>
<swiper-container class="mySwiper" pagination="true" effect="coverflow" grab-cursor="true" centered-slides="true"
slides-per-view="auto" coverflow-effect-rotate="50" coverflow-effect-stretch="0" coverflow-effect-depth="100"
coverflow-effect-modifier="1" coverflow-effect-slide-shadows="true">
<swiper-slide>
<img src=" https://swiperjs.com/demos/images/nature-1.jpg" />
</swiper-slide>
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
</swiper-slide>
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
</swiper-slide>
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-4.jpg" />
</swiper-slide>
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-5.jpg" />
</swiper-slide>
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-6.jpg" />
</swiper-slide>
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-7.jpg" />
</swiper-slide>
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-8.jpg" />
</swiper-slide>
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-9.jpg" />
</swiper-slide>
</swiper-container>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>
</body>
답변 1
※ https://codesandbox.io/p/sandbox/p3f7rh?file=%2Findex.html
<!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" />
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<!-- 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 {
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 300px;
height: 300px;
}
.swiper-slide img {
display: block;
width: 100%;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-4.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-5.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-6.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-7.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-8.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-9.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-4.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-5.jpg" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
effect: "coverflow",
grabCursor: true,
centeredSlides: true,
slidesPerView: "auto",
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
},
pagination: {
el: ".swiper-pagination",
},
});
</script>
</body>
</html>