Swiper Slider Implementation
also stop autoplay if mouseenter and resume if mouseleave
– `loop: true` (continuous looping)
– `slidesPerView: 3` (showing 3 slides at a time)
– `autoplay` enabled
– Stops autoplay on `mouseenter`
– Resumes autoplay on `mouseleave`
### Example Code (Vanilla JS + Swiper)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swiper Slider</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css">
<style>
.swiper {
width: 80%;
height: 300px;
}
.swiper-slide {
display: flex;
align-items: center;
justify-content: center;
background: #ddd;
font-size: 20px;
font-weight: bold;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="swiper-container">
<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>
<!-- Pagination & Navigation -->
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.swiper-container', {
slidesPerView: 3,
loop: true,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
// Pause autoplay on mouse enter
document.querySelector('.swiper-container').addEventListener('mouseenter', () => {
swiper.autoplay.stop();
});
// Resume autoplay on mouse leave
document.querySelector('.swiper-container').addEventListener('mouseleave', () => {
swiper.autoplay.start();
});
</script>
</body>
</html>### Explanation:
1. **Swiper Initialization**
– `slidesPerView: 3` (Shows 3 slides at a time)
– `loop: true` (Enables infinite scrolling)
– `autoplay` with `delay: 3000ms` (3 seconds)
– `disableOnInteraction: false` ensures autoplay doesn’t stop after manual interaction.
2. **Pause/Resume on Hover**
– `mouseenter` event stops autoplay using `swiper.autoplay.stop()`.
– `mouseleave` event resumes autoplay using `swiper.autoplay.start()`.
This setup ensures a smooth user experience with autoplay and manual control! 🚀