Guides Carousel

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

.block-guides-carousel {
	padding: $grid-gutter-width 0;

	@include bp($md) {
		padding: 0;
	}

	.container {
		padding-right: 0;
	}

	&__slider {
		margin-left: -16px;

		@include bp($md) {
			margin-left: 0;
		}
	}

	&__heading-wrapper {

		@include bp($md) {
			padding-top: rem-calc(70);
		}
	}
	&__heading-wrapper, &__slider-inner {
		@include bp($md) {
			padding-left: 40px;
			padding-right: 40px;
		}

		@include bp($lg) {
			padding-left: 100px;
			padding-right: 100px;
		}
	}

	&__heading {
		font-size: $heading-6;
		margin-bottom: $grid-gutter-width;
	}

	&__slide {
		display: flex;
		flex-direction: column;
		background-color: #4C55A2;
		height: 100%;
		align-items: flex-start;

		@include bp($md) {
			align-items: center;
			flex-direction: row;
			height: auto;
		}

		&-title {
			@include responsive-font($heading-8, $heading-7);
			font-weight: 400;
			line-height: 36px;
			--text-color: var(--white);
		}

		&-image {
			width: 100%;
			position: relative;
			aspect-ratio: 16 / 9;

			@include bp($md) {
				flex: 1 0 auto;
				// width: auto;
				width: rem-calc(220);
				min-height: rem-calc(310);
				height: 100%;
			}

			img {
				display: block;
				width: 100%;
			}
		}

		&-content {
			color: $white;
			padding: 1rem;
			display: flex;
			flex-direction: column;
			height: 100%;
			width: calc(100% - 2rem);

			@include bp($md) {
				padding: 1rem 2rem;
				display: block;
				height: auto;
			}
		}

		&-description {
			margin-bottom: 2rem;
		}

		&-link {
			font-size: 14px;
			margin-top: auto;
			justify-content: center;

			@include bp($md) {
				margin-top: 0;
			}
		}

		.btn {
			&.block-guides-carousel__slide-link {
				border-color: #fff;
				color: #fff;

				&:before {
					border-top-color: #fff;
				}

				&:hover {
					color: $primary;
				}
			}
		}

	}

	.swiper {
		overflow: visible;
		clip-path: inset(0 -100vw -80px 0);
	}

	.swiper-slide {
		height: auto;
	}


	@include slider-navigation;
}

class GuidesCarousel {
	block;

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

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

		this.swiper = new Swiper(this.swiperElem, {
			pagination: {
				el: this.paginationElem,
				type: "custom",
				renderCustom: function (swiper, current, total) {
					return current + '  ' + total;
				}
			},
			navigation: {
				nextEl: this.nextBtnElem,
				prevEl: this.prevBtnElem
			},
            slidesPerView: 1.5,
			centeredSlides: true,
			loop: true,
            spaceBetween: 20,
            breakpoints: {
				768: {
					slidesPerView: 1.10,
					centeredSlides: false,
					loop: false,
					spaceBetween: 20,
				},
				1201: {
					slidesPerView: 1.50,
					centeredSlides: false,
					loop: false,
					spaceBetween: 40,
				},
				1600: {
					slidesPerView: 1.90,
					centeredSlides: false,
					loop: false,
					spaceBetween: 40,
				}
            },

		});
	}
}

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

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