104 lines
3 KiB
JavaScript
104 lines
3 KiB
JavaScript
|
const swipecontainer = document.querySelector(".swipecontainer");
|
||
|
|
const likeBtns = document.querySelector(".like-btns");
|
||
|
|
var swiper = new Swiper(".swiper", {
|
||
|
|
spaceBetween: 60,
|
||
|
|
slidesPerView: "auto",
|
||
|
|
loop: true,
|
||
|
|
speed: 5000,
|
||
|
|
freeMode: true,
|
||
|
|
allowTouchMove: true,
|
||
|
|
autoplay: {
|
||
|
|
delay: 0,
|
||
|
|
disableOnInteraction: false,
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
function stopAutoPlay() {
|
||
|
|
const swiperTranslate = swiper.getTranslate();
|
||
|
|
swiper.setTranslate(swiperTranslate);
|
||
|
|
swiper.autoplay.stop();
|
||
|
|
}
|
||
|
|
function startAutoPlay() {
|
||
|
|
swiper.slideTo(swiper.activeIndex, 5000, true);
|
||
|
|
swiper.autoplay.start();
|
||
|
|
}
|
||
|
|
swipecontainer.addEventListener("mouseenter", () => stopAutoPlay());
|
||
|
|
swipecontainer.addEventListener("mouseleave", () => startAutoPlay());
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// featured projects slider
|
||
|
|
$(document).ready(function () {
|
||
|
|
var imageSlider = $(".slick-images").slick({
|
||
|
|
centerMode: true,
|
||
|
|
centerPadding: '60px',
|
||
|
|
slidesToShow: 3,
|
||
|
|
arrows: false,
|
||
|
|
dots: true,
|
||
|
|
asNavFor: ".slick-content",
|
||
|
|
infinite: true,
|
||
|
|
speed: 500,
|
||
|
|
responsive: [
|
||
|
|
{
|
||
|
|
breakpoint: 768,
|
||
|
|
settings: {
|
||
|
|
arrows: false,
|
||
|
|
centerMode: true,
|
||
|
|
centerPadding: '40px',
|
||
|
|
slidesToShow: 3
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
breakpoint: 480,
|
||
|
|
settings: {
|
||
|
|
arrows: false,
|
||
|
|
centerMode: true,
|
||
|
|
centerPadding: '40px',
|
||
|
|
slidesToShow: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
|
||
|
|
// Initialize Slick Slider for Content Slider with Center Mode
|
||
|
|
var contentSlider = $(".slick-content").slick({
|
||
|
|
centerMode: true,
|
||
|
|
centerPadding: '60px',
|
||
|
|
slidesToShow: 1,
|
||
|
|
asNavFor: ".slick-images",
|
||
|
|
infinite: true,
|
||
|
|
arrows: false,
|
||
|
|
dots: true,
|
||
|
|
speed: 500,
|
||
|
|
responsive: [
|
||
|
|
{
|
||
|
|
breakpoint: 768,
|
||
|
|
settings: {
|
||
|
|
arrows: false,
|
||
|
|
centerMode: true,
|
||
|
|
centerPadding: '40px',
|
||
|
|
slidesToShow: 3
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
breakpoint: 480,
|
||
|
|
settings: {
|
||
|
|
arrows: false,
|
||
|
|
centerMode: true,
|
||
|
|
centerPadding: '40px',
|
||
|
|
slidesToShow: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
|
||
|
|
// Sync swipe direction of both sliders
|
||
|
|
$('.content-slider').on('swipe', function (event, slick, direction) {
|
||
|
|
if (direction === 'left') {
|
||
|
|
imageSlider.slick('slickNext');
|
||
|
|
} else if (direction === 'right') {
|
||
|
|
imageSlider.slick('slickPrev');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|