Team Carousel

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

.block-team-carousel {
	background-color: $veryLightBlue;
	padding-top: rem-calc(80);
	padding-bottom: rem-calc(80);
	position: relative;

	&__intro {
		margin-bottom: rem-calc(48);
	}

	.heading {
		@include fluid-type(28, 34);
	}

	.swiper {
		position: relative;
	}

	.swiper-slide {
		background-color: $veryLightBlue;
		height: auto;
	}

	.e-carousel__navigation {
		position: relative;
		left: auto;
		bottom: auto;
		margin-left: 0;
		z-index: 99;

		@include bp($lg) {
			position: absolute;
			left: rem-calc(10);
			bottom: rem-calc(160);
		}
	}
}

class TeamCarousel {
	/**
	 * Create and initialise objects of this class
	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
	 * @param {object} block
	 */
	constructor() {
		this.blocks = document.querySelectorAll('.block-team-carousel');
		this.init();
	}

	/**
	 * Example function to run class logic
	 * Can access `this.block`
	 */
	init() {
		this.blocks.forEach((block) => {

			const blockCarousel = block.querySelector(".swiper");
			const navNext = block.querySelector(".test-next");
			const navPrev = block.querySelector(".test-prev");

			navPrev.style.border = "think solid #000000";

			// console.log(navPrev);

			const swiper = new Swiper(blockCarousel, {
				// loop: true,
				slidesPerView: 1,
				effect: 'fade',
				navigation: {
					nextEl: '.test-next',
					prevEl: '.test-prev',
				},
				breakpoints: {
					992: {
						slidesPerView: 1,
					},
					// 992: {
					// 	slidesPerView: 5,
					// }
				}
			});

		});
	}
}

new TeamCarousel();