<!DOCTYPE html>
<!-- saved from url=(0050)https://www.swiper.com.cn/demo/020-navigation.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; 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 demo_files/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%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* 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-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper mySwiper swiper-initialized swiper-horizontal swiper-pointer-events swiper-backface-hidden">
<div id="swiper-wrapper-9dc10d9ca3dcf534b" aria-live="polite">
<div class="swiper-slide swiper-slide-active" role="group" aria-label="1 / 9" style="width: 1920px;">Slide 1</div>
<div class="swiper-slide swiper-slide-next" role="group" aria-label="2 / 9" style="width: 1920px;">Slide 2</div>
<div role="group" aria-label="3 / 9" style="width: 1920px;">Slide 3</div>
<div role="group" aria-label="4 / 9" style="width: 1920px;">Slide 4</div>
<div role="group" aria-label="5 / 9" style="width: 1920px;">Slide 5</div>
<div role="group" aria-label="6 / 9" style="width: 1920px;">Slide 6</div>
<div role="group" aria-label="7 / 9" style="width: 1920px;">Slide 7</div>
<div role="group" aria-label="8 / 9" style="width: 1920px;">Slide 8</div>
<div role="group" aria-label="9 / 9" style="width: 1920px;">Slide 9</div>
</div>
<div tabindex="0" role="button" aria-label="Next slide" aria-controls="swiper-wrapper-9dc10d9ca3dcf534b" aria-disabled="false"></div>
<div class="swiper-button-prev swiper-button-disabled" tabindex="-1" role="button" aria-label="Previous slide" aria-controls="swiper-wrapper-9dc10d9ca3dcf534b" aria-disabled="true"></div>
<span aria-live="assertive" aria-atomic="true"></span></div>
<!-- Swiper JS -->
<script src="./Swiper demo_files/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
slidesPerView: 4,
paginationClickable: true,
spaceBetween: 30,
loop: true,
autoplay: false,
speed: 1000,
//autoplay: 2500,
nextButton: '',
prevButton: '',
breakpoints: {
//当宽度小于等于480
480: {
slidesPerView: 2,
spaceBetween:10
},
//当宽度小于等于980
980: {
slidesPerView: 2,
spaceBetween: 20
},
//当宽度小于等于1200
1200: {
slidesPerView: 3,
spaceBetween:20
}
},
});
</script>
</body></html>js部分 万能套