Image Link Carousel 2×2

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../node_modules/slick-carousel/slick/slick.scss";

.block-imagelink-carousel-2{
    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{
        @include fluid-type(20, 40, 375, $max-container-size);
        letter-spacing: 0.02em;
        font-weight: 300;
        margin-bottom: 0;
        strong{
            font-weight: 600;
        }
    }
    .heading-col{
        padding-bottom: rem-calc(20);
        @include bp($md){
            padding-bottom: 0;
        }        
    }
    
    .il2{
        &-carousel{
            display: none;
            margin-bottom: rem-calc(32);

            &.slick-initialized{
                display: block;
            }
        }

        &-slide{
            text-decoration: none;
            position: relative;
            border-radius: rem-calc(16);
            overflow: hidden;
            display: block;
            color: $black;
            border: 1px solid #9F9F9F;
            padding: rem-calc(8);
            background-color: $white;
            
            @include bp($md){
                margin: rem-calc(0 12);
            }
            @include bp($lg){
                border-radius: rem-calc(32);
                padding: 8px;
                background-color: $white;
            }

            &-image-wrapper{
                overflow: hidden;
                position: relative;
                margin-bottom: rem-calc(16);
                padding-top: calc( calc( 210 / 398 ) * 100% );
                border-radius: rem-calc(16);
                picture img{
                    transform: scale(1);
                    transition: 0.3s ease transform;
                }

                @include bp($lg){
                    margin-bottom: rem-calc(20);
                    padding-top: calc( calc( 255 / 614 ) * 100% );
                    border-radius: rem-calc(32);
                }                
            }

            &-content{
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: rem-calc(12);
                padding: rem-calc(0 12);

                @include bp($lg){
                    margin-bottom: rem-calc(22);
                    padding: rem-calc(0 22);
                }
            }

            &-heading{
                font-size: rem-calc(20);
                line-height: rem-calc(24);
                font-weight: 400;
                letter-spacing: 0.05em;
                padding-right: rem-calc(10);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                transition: 0.3s ease transform;
                
                @include bp($lg){
                    font-size: rem-calc(24);
                    line-height: rem-calc(44);
                }
            }

            &:hover{
                .il2-slide-image-wrapper{
                    picture img{
                        transform: scale(1.1);
                    }
                }
                .il2-slide-heading{
                    color: $orange;
                }
                .btn-arrow-only{
                    background-color: $orange;
                }
            }
        }                
    }
    
    &.bg--primary{
        .overline,
        .heading{
            color: $white;
        }
        .slick--arrow-wrap {
            .slides--numbers{
                color: $white;
            }
            .slick-arrow{
                border-color: $white;
                &--prev{
                    margin-right: 8px;
                    background-image: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.46875 13.8437L7.6875 13.625C7.84375 13.4688 7.84375 13.25 7.6875 13.0937L1.59375 7L7.6875 0.875C7.84375 0.71875 7.84375 0.5 7.6875 0.34375L7.46875 0.125C7.3125 -0.03125 7.09375 -0.0312501 6.9375 0.125L0.343751 6.71875C0.187501 6.875 0.187501 7.09375 0.343751 7.25L6.9375 13.8437C7.09375 14 7.3125 14 7.46875 13.8437Z' fill='white'/%3E%3C/svg%3E%0A");                
                }
                &--next{
                    background-image: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.53125 0.15625L0.3125 0.375C0.15625 0.53125 0.15625 0.75 0.3125 0.90625L6.40625 7L0.3125 13.125C0.15625 13.2812 0.15625 13.5 0.3125 13.6562L0.53125 13.875C0.6875 14.0312 0.90625 14.0312 1.0625 13.875L7.65625 7.28125C7.8125 7.125 7.8125 6.90625 7.65625 6.75L1.0625 0.15625C0.90625 0 0.6875 0 0.53125 0.15625Z' fill='white'/%3E%3C/svg%3E%0A");
                }
            }
        }
    }
    @include bp($md){
        .slick-list{        
            margin: 0 -12px;
        }
    }
    .slick--arrow-wrap .slides--numbers{
        display: none;
    }
}

import 'slick-carousel';

class ImageLinkCarouselTwo {
	/**
	 * 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-imagelink-carousel-2');
        this.init();
	}

	init() {
        var $il2_carousel = $('.block-imagelink-carousel-2').find('.il2-carousel');
		var $il2_progressbar = $('.block-imagelink-carousel-2').find('.slick--progress');
        var $il2progressBarLabel = $il2_progressbar.find( '.slider__label' );

        $il2_carousel.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
            var calc = ( (nextSlide) / (slick.slideCount-1) ) * 100;
            $il2_progressbar
            .css('background-size', calc + '% 100%')
            .attr('aria-valuenow', calc );

            $il2progressBarLabel.text( calc + '% completed' );
        });

        $il2_carousel.on('init', function(event, slick) {
            if(slick.slideCount>1){
                var calc = ( (slick.currentSlide+1) / (slick.slideCount) ) * 100;
                $il2_progressbar
                .css('background-size', calc + '% 100%')
                .attr('aria-valuenow', calc );

                $il2progressBarLabel.text( calc + '% completed' );
            }
            else{
                $il2_progressbar.hide();
            }
        });

		$il2_carousel.each(function(){
            var $sliderParent = $(this).parent();
            $(this).slick({
                slidesToShow: 1,
                arrows: true,
                dots: false,
                slidesToScroll: 1,
                autoplay: false,
                autoplaySpeed: 4000,
                //appendDots: $(".cs-slick-slider-dots"),
                prevArrow: $sliderParent.find(".slick-arrow--prev"),
			    nextArrow: $sliderParent.find(".slick-arrow--next"),
                rows:0,
                mobileFirst: true,
                responsive: [
                    {
                        breakpoint: 768,
                        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 ImageLinkCarouselTwo();