import Swiper, { Navigation, Pagination } from 'swiper';
import 'swiper/css';
import 'swiper/css/pagination';

const swiper = new Swiper('.slider-media__swiper', {
    modules: [Navigation, Pagination],
    navigation: {
        nextEl: '.slider-media__item-next',
        prevEl: '.slider-media__item-prev',
    },
    pagination: {
        clickable: true,
        el: '.swiper-pagination',
    },
    speed: 1000,
    slidesPerView: 2.28,
    spaceBetween: 120,
    initialSlide: 0,
    centeredSlides: true,
    observer: true,
    observeParents: true,
    virtualTranslate: false,
    watchSlidesProgress: true,
    breakpoints: {
        320: {
            slidesPerView: 1,
            spaceBetween: 16,
            initialSlide: 0,
        },
        480: {
            slidesPerView: 1,
            spaceBetween: 16,
        },
        768: {
            slidesPerView: 1,
            spaceBetween: 16,
            initialSlide: 1
        },
        1366: {
            slidesPerView: 1.8,
            spaceBetween: 80,
        },
        1440: {
            slidesPerView: 1.8,
            spaceBetween: 80,
        },
        1800: {
            slidesPerView: 2.20,
            spaceBetween: 80,
        },
    }
});