Logo Carousel

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

.block-logo-carousel {
	border-top: 1px solid $lightBlue;
	border-bottom: 1px solid $lightBlue;
	padding-top: rem-calc(32);
	padding-bottom: rem-calc(32);

	&--custom{
		border-top: unset;
	}

	.swiper-wrapper {
		align-items: center;
	}

	.swiper-slide {
		img {
			display: block;
			margin: 0 auto;
			max-height: rem-calc(120);
			max-width: rem-calc(165);
			height: auto;
			width: auto;
		}
	}

	.swiper {
		padding-left: 0;
		padding-right: 0;
		position: relative;

		@include bp($md) {
			padding-left: rem-calc(100);
			padding-right: rem-calc(100);
		}

		&:before,
		&:after {
			content: '';
			position: absolute;
			top: rem-calc(-10);
			bottom: rem-calc(-10);
			width: rem-calc(140);
			z-index: 9;
			display: none;

			@include bp($md) {
				display: block;
			}
		}

		&:before {
			left: rem-calc(-10);
			background: rgb(255,255,255);
			background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 55%);
		}

		&:after {
			right: rem-calc(-10);
			background: rgb(255,255,255);
			background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 55%);
		}
	}
}

class logoCarousel {

	constructor() {
		this.blocks = document.querySelectorAll('.block-logo-carousel');
		this.init();
	}

	init() {
		this.blocks.forEach((block) => {
			const blockCarousel = block.querySelector(".swiper");
			const swiper = new Swiper(blockCarousel, {
				loop: true,
				slidesPerView: 2,
				autoplay: {
					delay: 1000,
					disableOnInteraction: false,
				},
				speed: 5000,
				breakpoints: {
					500: {
						slidesPerView: 3,
					},
					992: {
						slidesPerView: 5,
					}
				}
			});
		});
	}
}

new logoCarousel();