@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;
.single-sector & {
border-bottom: none;
.container {
border-bottom: 1px solid $lightBlue;
padding-bottom: rem-calc(32);
}
}
}
.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();