66 lines
1.5 KiB
JavaScript
66 lines
1.5 KiB
JavaScript
|
const swiper = new Swiper(".container .swiper",{
|
||
|
|
spaceBetween: 30,
|
||
|
|
slidesPerView: "auto",
|
||
|
|
loop: true,
|
||
|
|
speed: 4000,
|
||
|
|
freeMode: true,
|
||
|
|
allowTouchMove: false,
|
||
|
|
autoplay: {
|
||
|
|
delay: 0,
|
||
|
|
disableOnInteraction: false,
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
function stopAutoplay() {
|
||
|
|
const swiperTranslate = swiper.getTranslate();
|
||
|
|
swiper.setTranslate(swiperTranslate);
|
||
|
|
swiper.autoplay.stop();
|
||
|
|
}
|
||
|
|
|
||
|
|
function startAutoplay() {
|
||
|
|
swiper.slideTo(swiper.activeIndex, 2000, false);
|
||
|
|
swiper.autoplay.start();
|
||
|
|
}
|
||
|
|
|
||
|
|
const container = document.querySelector(".swiper");
|
||
|
|
container.addEventListener("mouseenter",() => stopAutoplay());
|
||
|
|
container.addEventListener("mouseleave",() => startAutoplay());
|
||
|
|
|
||
|
|
|
||
|
|
//Featured Slider
|
||
|
|
const imageSlider = new Swiper(".image-slider", {
|
||
|
|
loop:true,
|
||
|
|
slidesPerView: 3,
|
||
|
|
centeredSlides: true,
|
||
|
|
effect: "coverflow",
|
||
|
|
coverflowEffect: {
|
||
|
|
rotate: 0,
|
||
|
|
depth: 200,
|
||
|
|
stretch: 30,
|
||
|
|
modifier: 1,
|
||
|
|
scale: 1,
|
||
|
|
slideShadows: false,
|
||
|
|
},
|
||
|
|
|
||
|
|
grabCursor:true,
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
const infoSlider = new Swiper(".info-slider", {
|
||
|
|
loop: true,
|
||
|
|
autoplay:false,
|
||
|
|
grabCursor: true,
|
||
|
|
|
||
|
|
allowTouchMove: true,
|
||
|
|
pagination: {
|
||
|
|
el: '.swiper-pagination',
|
||
|
|
clickable: true,
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
imageSlider.controller.control = infoSlider;
|
||
|
|
infoSlider.controller.control = imageSlider;
|