Skip to content

Instantly share code, notes, and snippets.

@sagive
Last active July 2, 2022 21:37
Show Gist options
  • Save sagive/d2cb742e8ce026fc49058617ada27d5c to your computer and use it in GitHub Desktop.
Save sagive/d2cb742e8ce026fc49058617ada27d5c to your computer and use it in GitHub Desktop.
Complete swiper example + run the swiper when it enters the viewport - treshold = "percent of element visible" -> 0.1 = 10%
// TESTIMONIALS SWIPER
const testimonySwiper = new Swiper(".testimonySwiper", {
loop: true,
slidesPerView: 1.3,
spaceBetween: 16,
centeredSlides: true,
initialSlide: 3,
autoplay: {
delay: 7500,
disableOnInteraction: true,
},
breakpoints: {
// when window width is >= 480px
440: {
slidesPerView: 1.4,
spaceBetween: 16
},
// when window width is >= 640px
960: {
slidesPerView: 4,
spaceBetween: 16
},
1250: {
slidesPerView: 4,
spaceBetween: 16
},
1440: {
slidesPerView: 3.6,
spaceBetween: 32.
},
2560: {
slidesPerView: 5.5,
spaceBetween: 32.
}
}
});
// run testimony swiper when it enters the viewport
const ttSlider = document.querySelector(".testimonySwiper");
const observer = new window.IntersectionObserver(([entry]) => {
if (entry.isIntersecting) {
testimonySwiper.slideNext();
}
// console.log("LEAVE")
}, {
root: null,
threshold: 0.1, // set offset 0.1 means trigger if atleast 10% of element in viewport
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment