swiper显示多个slide并且箭头在框外
swiper源代码
<!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="./swiper/swiper-bundle.min.css" />
</head>
<body>
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./images/nature-1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./images/nature-2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./images/nature-3.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./images/nature-4.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./images/nature-5.jpg" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="./swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
slidesPerView: 3,
spaceBetween: 10,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
loop: true,
autoplay: {
delay: 1000
}
});
</script>
</body>
</html>
效果图:
修改后的代码:
<div style="position:relative">
<div class="swiper mySwiper" style="width: 90%;">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../img/carousel-1.png" alt="">
</div>
<div class="swiper-slide">
<img src="../img/carousel-2.png" alt="">
</div>
<div class="swiper-slide">
<img src="../img/carousel-3.png" alt="">
</div>
<div class="swiper-slide">
<img src="../img/carousel-4.png" alt="">
</div>
<div class="swiper-slide">
<img src="../img/carousel-5.png" alt="">
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
在原来的swiper外嵌套一层div,position为relative,将切换button放到新增的div下
修改后的效果图: