import Swiper, {Navigation, Pagination, Thumbs} from 'swiper';
import 'swiper/swiper-bundle.min.css'; // Ensure Swiper CSS is included

export default class ActivitySwiperNew {

    constructor(el) {
        this.el = el;

        setTimeout(() => {
            var swiper = new Swiper(el.querySelector('.js-main-activity-swiper'), {
                modules: [Navigation],
                navigation: {
                    nextEl: '.js-swiper-activity-button-next',
                    prevEl: '.js-swiper-activity-button-prev',
                    disabledClass: "is-disabled"

                },
                loop: false,
                slidesPerView: "auto",
                spaceBetween: 16,
                breakpoints: {
                    640: {
                        slidesPerView: 2,
                        spaceBetween: 10,
                    },
                    768: {
                        slidesPerView: 3,
                        spaceBetween: 20,
                    },
                    1200: {
                        slidesPerView: 4,
                        spaceBetween: 16,
                    },
                },
            });
        }, 500);
    }
}