Custom Slick Slider Controls

Here’s how I created some custom Slick slider controls

For www.melistudio.com.au

Add JS Code

;(function ($) {
    var $heroSectionSlider = $('.hero-section--slider')

    if ($heroSectionSlider.length) {
        initSlick($heroSectionSlider, {
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: false,
            appendDots: $(".slide-m-dots"),
            dots: true,
            fade: true,
            cssEase: 'linear',
            autoplay: true,
            autoplaySpeed: 6000
        })
        // .slick().on('init', console.log)
    }
    $('.hero-section--slider').on('afterChange', function() {
        var dataId = parseInt($('.slick-current').attr("data-slick-index"));  
        ++dataId
        var output = ("000" + dataId).slice(-2); 
        $('.count').text(output); 
    });

    
})(jQuery)

Add in this PHP code under the div container that holds your slider which in this project it’s called hero-section–slider

    <div class="slider-controls text-white animate__animated animate__fadeIn animate__delay-2s">
        <div class="count">01</div>
        <div class="slide-m-dots"></div>
    </div>

Add in the Styles

  .slider-controls{
    position: absolute;
    left: 5.625rem;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 99;
    @include media-breakpoint-down(lg) {
      left: 3rem;
    }
    @include media-breakpoint-down(md) {
      left: 2rem;
    }
    @include media-breakpoint-down(xs) {
      left: 1rem;
    }
    .count{
        display: block;
        font-size: .875rem;
        font-weight: $font-weight-semibold;
        @include mb(.5rem);
        letter-spacing: .1em;
    }
    .slick-dots{
        position: relative;
        bottom: auto;
        font-size: 0;
        li{
            background-color: rgba(222,222,222,0.5);
            @include my(4px);
            width: 2px;
            height: 30px;
            transition: all 0.3s ease;
            @include ml(9px);
            display: block;
            button{
              display: none;
            }
            &.slick-active{
                background-color: rgba(222,222,222,1);
                height: 75px;
            }
        }
    }
  }

For www.newenglandhighcountry.com.au
On the Stories Section

Add JS Code

;(function ($) {

    $('.featured-articles-row').slick({
        dots: true,
        arrows: true,
        appendDots: $(".slide-m-dots"),
        prevArrow: $(".slide-m-prev"),
        nextArrow: $(".slide-m-next"),
        infinite: true,
        speed: 300,
        slidesToShow: 4,
        slidesToScroll: 1,      
        responsive: [
        {
            breakpoint: 950,
            settings: {
            slidesToShow: 2,
            slidesToScroll: 1
            }
        },
        {
            breakpoint: 768,
            settings: {
            slidesToShow: 1,
            slidesToScroll: 1
            }
        }
        // You can unslick at a given breakpoint now by adding:
        // settings: "unslick"
        // instead of a settings object
        ]
    });

})(jQuery);

Add in this PHP code under the div container that holds your slider which in this project it’s called featured-articles-row

        <div class="slider-controls">
            <button type="button" class="slide-m-prev"><i class="fa fa-angle-left"></i></button>
                <div class="slide-m-dots"></div>
            <button type="button" class="slide-m-next"><i class="fa fa-angle-right"></i></button>
        </div>

Add in the Styles

    .slider-controls{
        @include mt(3rem);
        @include media-breakpoint-down(sm) {
            @include mt(1rem);   
        }
        button{
            float: left;
            border: none;
            background-color: transparent;
            .fa{
                color: $grey;
                font-size: 1.25rem;
            }
            &:focus, &:active{
                outline: none;
            }
        }
        .slick-dots{
            position: relative;
            float: left;
            bottom: auto;
            left: auto;
            width: auto;
            transform: none;
            @include py(0.4375rem);
            button{
                color: $grey;
            }
        }
    }