const sliderThumbs = new Swiper('.slider__thumbs .swiper-container', { 
    direction: 'vertical',
    slidesPerView: 5, 
    spaceBetween: 8, 
    navigation: { 
        nextEl: '.slider__prev', 
        prevEl: '.slider__next'  
    },
    freeMode: true, 
    breakpoints: { 
        0: { 
            direction: 'horizontal', 
			slidesPerView: 4, 
        },
        999: { 
            direction: 'vertical', 
        }
    }
});

const sliderImages = new Swiper('.slider__images .swiper-container', { 
    direction: 'vertical', 
    slidesPerView: 1, 
    spaceBetween: 32, 
    mousewheel: true, 
    navigation: { 
        nextEl: '.slider__prev', 
        prevEl: '.slider__next'  
    },
    grabCursor: true, 
    thumbs: { 
        swiper: sliderThumbs 
    },
    breakpoints: { 
        0: { 
            direction: 'horizontal', 
        },
        999: {
            direction: 'vertical', 
        }
    }
});





const swiper = new Swiper('.custom-swiper', {
    slidesPerView: 1, 
    spaceBetween: 16, 
    loop: true,
    pagination: {
        el: '.swiper-pagination',
        type: 'progressbar', 
    },
    breakpoints: {
        480: {
            slidesPerView: 2, 
            spaceBetween: 8, 
        },
        768: {
            slidesPerView: 3, 
            spaceBetween: 12, 
        },
        1024: {
            slidesPerView: 3, 
            spaceBetween: 16, 
        },
        1337: {
            slidesPerView: 4, 
            spaceBetween: 20, 
        }
    },
});