Basic Carousel

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-basic-carousel {
    padding-top: clamp(2rem, 5vw, 4rem);
    padding-bottom: clamp(2rem, 5vw, 4rem);

    .swiper-slide {
        &__inner {
            min-height: 300px;
            position: relative;
            
        }
    }

    .button-wrapper {
        @include bp($md) {
            display: flex;
            justify-content: flex-end;
        }
    }
}

class BasicCarousel {
    block;

	constructor(block) {
		this.block = block;
		this.init();
	}

	init() {
		
		this.swiperElem = this.block.querySelector('.swiper');
		this.paginationElem = this.block.querySelector('.swiper-pagination');
		this.prevBtnElem = this.block.querySelector('.swiper-button-prev');
		this.nextBtnElem = this.block.querySelector('.swiper-button-next');

		this.swiper = new Swiper(this.swiperElem, {
			pagination: {
				el: this.paginationElem,
				clickable: true,
			},
			navigation: {
				nextEl: this.nextBtnElem,
				prevEl: this.prevBtnElem
			},
            slidesPerView: 1,
            spaceBetween: 10,
            breakpoints: {
                768: {
                    slidesPerView: 2,
                },
                1024: {
                    slidesPerView: 3,
                },
            },
		}); 
	}
}

document.addEventListener('DOMContentLoaded', () => {
	document.querySelectorAll('.block-basic-carousel').forEach((block) => {
		new BasicCarousel(block);
	})
});

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/basic-carousel",
    "title": "Basic Carousel",
    "description": "Example block to be used as a template",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-basic-carousel.php"
    },
    "supports": {
        "anchor": true,
        "align": false,
        "color": {
            "background": false,
            "text": false,
            "gradients": false
        },
        "spacing": {
            "padding": [
                "top",
                "bottom"
            ],
            "margin": [
                "top",
                "bottom"
            ]
        }
    },
    "example": {
        "attributes": {
            "mode": "preview",
            "data": {
                "heading_type": "h2",
                "heading_text": "Example - Basic Carousel",
                "content": "This is some example content to represent what the content will look like"
            }
        }
    },
    "style": ["file:../../assets/css/basic-carousel/block-basic-carousel.css", "swiper-css"],
    "viewScript": ["swiper-js", "basic-carousel"]
}