Partners Slider

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

.block-partners-slider {
	border-top: 1px solid $border-grey;

	&__partner {
		padding-top: rem-calc(40);
		padding-bottom: rem-calc(40);
		padding-left: rem-calc(16);
		padding-right: rem-calc(16);


		@include bp($md) {
			padding-top: rem-calc(60);
			padding-bottom: rem-calc(60);
			padding-left: rem-calc(40);
			padding-right: rem-calc(40);
		}

		@include bp($xl) {
			padding-top: rem-calc(70);
			padding-bottom: rem-calc(70);
			padding-left: rem-calc(120);
			padding-right: rem-calc(120);
		}

		> img {
			max-width: rem-calc(184);
		}

		> img,
		picture {
			margin-bottom: rem-calc(24);

			@include bp($md) {
				margin-bottom: rem-calc(36);
			}
		}

		.content-container {
			color: var(--text-color);
			line-height: 1.5;

			:last-child {
				margin-bottom: 0;
			}
		}
	}

	@include slider-navigation;

	.swiper {
		border-right: none;

		@include bp($lg) {
			border-right: 1px solid $border-grey;
		}
	}

	.swiper-slide {
		border-right: 1px solid $border-grey;
		height: auto;
	}

	.slider-navigation {
		margin-top: 0;
	}
}

class PartnersSlider {
    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.25,
            spaceBetween: 0,
			loop: false,
            breakpoints: {
                992: {
                    slidesPerView: 2
                }
            },

		});
	}
}

document.addEventListener('DOMContentLoaded', () => {
	document.querySelectorAll('.block-partners-slider').forEach((block) => {
		new PartnersSlider(block);
	})
});

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/partners-slider",
    "title": "Partners Slider",
    "description": "Example block to be used as a template",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-partners-slider.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 - Partners Slider",
                "content": "This is some example content to represent what the content will look like"
            }
        }
    },
    "style": ["file:../../assets/css/partners-slider/block-partners-slider.css"],
    "viewScript": ["partners-slider"]
}