如何在页面上放置多个相同的滑动滑块以使它们不相互依赖。为了不写大量代码
const mySwiperOne = new Swiper(".mySwiperOne", {
spaceBetween: 10,
navigation: {
nextEl: ".mySwiperOne-next",
prevEl: ".mySwiperOne-prev",
},
simulateTouch:false,
thumbs: {
swiper: {
el: '.mySwiperTwo',
slidesPerView: 7
}
},
effect: 'fade',
fadeEffect: {
crossFade: true
}
});
const mySwiperTwo = new Swiper(".mySwiperTwo", {
spaceBetween: 7,
slidesPerView: 7,
navigation: {
nextEl: ".mySwiperTwo-next",
prevEl: ".mySwiperTwo-prev",
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Swiper Sliders</title>
<!-- Include Swiper CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<!-- Custom styles -->
<style>
.swiper-container {
margin-bottom: 20px;
}
</style>
</head>
<body>
<!-- Swiper Sliders -->
<div class="swiper-container mySwiperOne">
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<!-- Add more slides as needed -->
</div>
<!-- Navigation arrows -->
<div class="swiper-button-next mySwiperOne-next"></div>
<div class="swiper-button-prev mySwiperOne-prev"></div>
</div>
<div class="swiper-container mySwiperTwo">
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<!-- Add more slides as needed -->
</div>
<!-- Navigation arrows -->
<div class="swiper-button-next mySwiperTwo-next"></div>
<div class="swiper-button-prev mySwiperTwo-prev"></div>
</div>
<!-- Include Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!-- Custom JavaScript -->
<script>
// Function to initialize Swiper instance
function initializeSwiper(containerClass, options) {
return new Swiper(containerClass, options);
}
// Initialize Swiper sliders
const mySwiperOne = initializeSwiper(".mySwiperOne", {
spaceBetween: 10,
navigation: {
nextEl: ".mySwiperOne-next",
prevEl: ".mySwiperOne-prev",
},
simulateTouch: false,
thumbs: {
swiper: {
el: '.mySwiperTwo',
slidesPerView: 7
}
},
effect: 'fade',
fadeEffect: {
crossFade: true
}
});
const mySwiperTwo = initializeSwiper(".mySwiperTwo", {
spaceBetween: 7,
slidesPerView: 7,
navigation: {
nextEl: ".mySwiperTwo-next",
prevEl: ".mySwiperTwo-prev",
}
});
</script>
</body>
</html>