Slick Slider with custom controls and slide indicator

blade-template.php

// blade template - just html really
@section('journal-carousel')
    <div class="container article-carousel">
        <div class="row">
            <div class="col-sm-12">
                <div class="article-carousel__slider">
                    @for ($i = 0; $i < 3; $i++)
                        <figure><img src="{{Theme::url('images/blonde'.$i.'.jpg')}}" alt="" class="img-responsive" /></figure>
                    @endfor
                    @for ($i = 0; $i < 3; $i++)
                        <figure><img src="{{Theme::url('images/blonde'.$i.'.jpg')}}" alt="" class="img-responsive" /></figure>
                    @endfor
                </div>
                <div class="carousel-controls">
                    <button class="carousel-controls__next btn" type="button"><span class="fa fa-long-arrow-right"></span></button>
                    <div class="carousel-controls__indicator">
                        <span class="indicator--current">01</span> / <span class="indicator--total">05</span>
                    </div>
                    <button class="carousel-controls__prev btn" type="button"><span class="fa fa-long-arrow-left"></span></button>
                </div>
                <figcaption>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, eaque.</p>
                </figcaption>
            </div>
        </div>
    </div>
@show

slick-slider.js

var $slider = $('.article-carousel__slider');

// Slide indicator
var $total = $('.carousel-controls__indicator .indicator--total');
var $current = $('.carousel-controls__indicator .indicator--current');
$slider.on('init afterChange', function(event, slick, currentSlide, nextSlide){
    $current.text(slick.currentSlide + 1);
    $total.text(slick.slideCount);
});

// Init slider with options
$slider.slick({
    slidesToShow: 3,
    variableWidth: true,
    infinite: false,
    speed: 200,
    arrows: false
});

// Controls
// Next slide button
$('.carousel-controls__next').click(function() {
    $slider.slick('slickNext');
});

// Prev slide button
$('.carousel-controls__prev').click(function() {
    $slider.slick('slickPrev');
});


// Events
// On before slide change
$slider.on('beforeChange', function(event, slick, currentSlide, nextSlide){
    $('.article-carousel figcaption').fadeOut();
});

// On after slide change
$slider.on('afterChange', function(event, slick, currentSlide, nextSlide){
    $('.article-carousel figcaption').fadeIn();
    
    // Slider Controls
    // Show both control buttons if we are between the first and last slide
    if(slick.currentSlide > 0 && slick.currentSlide + 1 < slick.slideCount){
        $('.carousel-controls__prev, .carousel-controls__next').css({
            'opacity': 1,
            'visibility': 'visible'
        });
        // Hide prev button if we are on the first slide
    } else if(slick.currentSlide === 0) {
        $('.carousel-controls__prev').css({
            'opacity': 0,
            'visibility': 'hidden'
        });
        // Hide next button if we are on the last slide
    } else if(slick.currentSlide + 1 == slick.slideCount){
        $('.carousel-controls__next').css({
            'opacity': 0,
            'visibility': 'hidden'
        });
    }
    
});

slider.scss

.article-carousel{
    margin-bottom: 100px;

    .slick-slider{
        .slick-list{
            overflow: visible;
        }
        img{
            max-height: calc(100vh - 50px);
        }
        .slick-slide{
            opacity: 0.5;
            transition: opacity 0.2s ease;
        }
        .slick-current{
            opacity: 1;
        }
    }

    .btn{
        &.carousel-controls__next, &.carousel-controls__prev{
            min-width: 72px;
            height: 48px;
            background-color: $c-yellow;
            &:hover, &:focus{
                box-shadow: none;
                background-color: $c-yellow-light;
            }
        }
        &.carousel-controls__prev{
            visibility: hidden;
            opacity: 0;
        }
    }

    .carousel-controls{
        display: inline-block;
        position: absolute;
        top: 31.5%;
        right: 0px;
    }

    .carousel-controls__indicator{
        height: 48px;
        width: 72px;
        text-align: center;
        font-family: $f-serif;
        font-size: 1.125rem;
        background-color: $c-white;
        padding-top: 10px;
        .indicator--total{
            color: $c-grey;
        }
    }

}