@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../node_modules/slick-carousel/slick/slick.scss";
.block-logo-scroller{
padding: rem-calc(40 0);
color: $black2;
.heading{
font-size: rem-calc(24);
line-height: rem-calc(32);
letter-spacing: 0.02em;
margin-bottom: rem-calc(45);
@include bp($lg){
font-size: rem-calc(32);
line-height: rem-calc(40);
margin-bottom: rem-calc(50);
}
}
.logo-slider{
width: 100%;
position: relative;
z-index: 1;
display: none;
&.slick-initialized{
display: block;
padding-left: 20px;
@include bp($md){
padding-left: 0;
}
}
.logo-slide{
width: rem-calc(200);
margin-right: rem-calc(70);
.logo-block{
display: flex;
width: rem-calc(200);
height: rem-calc(100);
justify-content: center;
align-items: center;
margin: 0 auto;
img{
max-width: rem-calc(200);
max-height: rem-calc(100);
}
}
}
}
&.bg--primary{
color: $white;
}
}
import '../../node_modules/slick-carousel/slick/slick';
class LogoScroller {
/**
* 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-logo-scroller');
this.init();
}
/**
* Example function to run class logic
* Can access `this.block`
*/
init() {
$('.logo-slider').slick({
slideToShow: 4,
slidesToScroll: 1,
arrows: false,
dots: false,
autoplay: true,
autoplaySpeed: 1000,
rows:0,
variableWidth: true,
mobileFirst:true,
infinite: true,
pauseOnHover: false,
cssEase: 'linear',
speed: 8000,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 4,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 3,
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
}
]
});
}
}
new LogoScroller();