@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../node_modules/slick-carousel/slick/slick.scss";
.block-people-carousel{
padding: 3em 0;
@include bp($lg){
padding: 6em 0;
}
.heading-row{
align-items: center;
margin-bottom: rem-calc(20);
@include bp($lg){
margin-bottom: rem-calc(40);
}
}
.heading{
font-size: rem-calc(24);
line-height: rem-calc(32);
letter-spacing: 0.02em;
font-weight: 400;
margin-bottom: 0;
@include bp($lg){
font-size: rem-calc(40);
line-height: rem-calc(48);
}
}
.heading-col{
padding-bottom: rem-calc(20);
@include bp($md){
padding-bottom: 0;
}
}
.content-col{
color: $black2;
@include bp($md){
display: flex;
justify-content: flex-end;
}
.btn{
margin-right: 0;
}
}
.pc{
&-carousel{
display: none;
margin-bottom: rem-calc(32);
&.slick-initialized{
display: block;
}
}
&-slide{
//width: rem-calc(308);
margin: rem-calc(0 10 0 10);
.member-card{
margin-bottom: 0;
}
}
}
&.bg--primary{
.overline,
.heading,
.content-col{
color: $white;
}
}
@include bp($md){
.slick-list{
margin: 0 -12px;
}
}
.slick--arrow-wrap .slides--numbers{
display: none;
}
}
import 'slick-carousel';
class PeopleCarousel {
/**
* 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-people-carousel');
this.init();
}
init() {
var $pc_carousel = $('.block-people-carousel').find('.pc-carousel');
var $pc_progressbar = $('.block-people-carousel').find('.slick--progress');
var $pcprogressBarLabel = $pc_progressbar.find( '.slider__label' );
$pc_carousel.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
var calc = ( (nextSlide) / (slick.slideCount-1) ) * 100;
$pc_progressbar
.css('background-size', calc + '% 100%')
.attr('aria-valuenow', calc );
$pcprogressBarLabel.text( calc + '% completed' );
});
$pc_carousel.on('init', function(event, slick) {
if(slick.slideCount>1){
var calc = ( (slick.currentSlide+1) / (slick.slideCount) ) * 100;
$pc_progressbar
.css('background-size', calc + '% 100%')
.attr('aria-valuenow', calc );
$pcprogressBarLabel.text( calc + '% completed' );
}
else{
$pc_progressbar.hide();
}
});
$pc_carousel.each(function(){
var $sliderParent = $(this).parent();
$(this).slick({
slidesToShow: 1,
arrows: true,
dots: false,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 4000,
prevArrow: $sliderParent.find(".slick-arrow--prev"),
nextArrow: $sliderParent.find(".slick-arrow--next"),
rows:0,
mobileFirst: true,
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 4,
}
},
{
breakpoint: 996,
settings: {
slidesToShow: 3,
}
},
{
breakpoint: 576,
settings: {
slidesToShow: 2,
}
},
]
});
$(this).on('afterChange', function(event, slick, currentSlide){
$sliderParent.find('.slides--numbers .active').html(currentSlide + 1);
});
var sliderItemsNum = $(this).find('.slick-slide').not('.slick-cloned').length;
$sliderParent.find('.slides--numbers .total').html(sliderItemsNum);
});
}
}
new PeopleCarousel();