In this post, we are going to learn how to create a vertical slick slider with custom dots and arrows using your own icons to replace the default buttons provided by slick.

vertical slick slider example
Click Image to View Fully Working Example

Before we start the slider, files need to be installed into your working project. These can be downloaded from the official site Here.

This file structure shows the folders that need to be in place. This includes the newly downloaded slick folder as well as folders to hold your custom CSS and images. The extra folders and files here are for bootstrap CSS and JavaScript which is an optional step. The main working files for this project will be index.html and css/custom.css.

slick-slider-directory
File Directory for Project

The first step is to point to the slick and custom CSS files by adding style sheets to the <head> section of the index.html file. This is followed up by creating the markup for the slider structure and content. In this example, three slides are being created with a div for each image and a nested div for the content.

HTML

<head>
   <!-- Slick Slider -->
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/custom.css">
</head>
 <!-- Slider Section -->
    <section id="slider" class="container-fluid">
        <div class="container slick-slider">
           <div class="slide">
                <img src="images/slider-image1.jpg">
                <div class="slide-content">
                    <h4>Slide Title 1</h4>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore,Lorem ipsum dolor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
                </div>
            </div>
            <div class="slide">
                <img src="images/slider-image2.jpg">
                <div class="slide-content">
                    <h4>Slide Title 2</h4>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et doloreLorem ipsum dolor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
                </div>
            </div>
            <div class="slide">
                <img src="images/slider-image3.jpg">
                <div class="slide-content">
                    <h4>Slide Title 3</h4>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore Lorem ipsum dolor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
                </div>
            </div>
        </div>
    </section>

The JavaScript section mainly consists of one function with various values that can be added to enhance the functionality of the slider. By adding vertical: true this makes the slides scroll vertically. The arrows and dots are also enabled by changing the values to true.

To customise the arrows, a div needs to be added as a value to prevArrow & nextArrow. This is to allow a class to be declared in order to connect to the custom CSS.

In order for the dots to show as an active state for each slide, a customPaging function is added to point to the active and non-active dot images located in the images folder.

JavaScript

<!-- Slick Slider Script -->
<script type="text/javascript" src="slick/slick.min.js"></script>

<script type="text/javascript">
        $(document).ready(function(){
            $('.slick-slider').slick({
                vertical: true,
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplay: true,
                arrows: true,
                prevArrow: '<div class="slick-prev"></div>',
                nextArrow: '<div class="slick-next"></div>',
                dots: true,
                customPaging : function(slider, i) {
                return '<a href="#"><img src="images/slide-dot.png" /><img src="images/slide-dot-active.png" /></a>';
                },
            });
        });
</script>

The CSS is a little more involved but fairly easy to follow. The slider has a light grey border and is full width with a position of relative so that the content can be absolute positioned with opacity on the right-hand side. The .slick-dots class mainly consists of the styles for positioning the dots on the right-hand side of the slider using Flexbox CSS. The CSS :nth-child() Selector works in conjunction with the JavaScript customPaging to allow the active red dot to show with the current slide.

With the .slick-prev & .slick-next classes declared in the JavaScript, the CSS can hook on to display the arrows and position them. The background-size needs to be set to “contain” and a position of absolute. The CSS :hover Selector is used allowing the arrow to change to the colour red whenever a mouse hovers over it.

CSS

/* Slider Section */

.slick-slider {
    border: 10px solid lightgrey;
    width: 100%;
    padding: 0;
    position: relative;
    top: 5%; 
        
}

#slider {
    background-color: grey;
    height: 100%;
    padding: 2% 10%;
    
}

#slider img {
    width: 100%;
    margin: 0;
    padding: 0;
}

.slide {
    position: relative;
    border: none;
}

.slide-content {
    position: absolute;
    top: 0px;
    right: 0%;
    height: 100%;
    width: 35%;
    background-color: #000;
    opacity: 0.8;
    color: #fff;
    text-align: center; 
    padding: 25px 70px 25px 25px;  
    text-align: left;  
}


/* Slick Dots */

.slick-dots {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    list-style: none;
    text-align: center;
    margin: 0px 3px;
    padding: 11% 1% 11% 1.5%;
    border-left: 3px solid lightgrey;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}


.slick-dots li img:nth-child(1) {
    display: block;  
}  

.slick-dots li img:nth-child(2) {
    display: none;   
}

.slick-dots li.slick-active img:nth-child(1) {
    display: none;   
}

.slick-dots li.slick-active img:nth-child(2) {
    display: block;  
}

/* Slick Arrows */

.slick-prev, .slick-next {
    height: 20px;
    width: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
   
}

.slick-prev {
    background-image: url('/images/slider-up-arrow.png');

    /* place button top right */
    top: 2%;
    right: 1%;
    z-index: 10;
}


.slick-next {
    background-image: url('/images/slider-down-arrow.png');

    /* place button bottom right */
    right: 1%;
    bottom: 2%;
    z-index: 20;
}

.slick-prev:hover {
    background-image: url('/images/slider-up-arrow-hover.png');

    /* place button top right */
    top: 2%;
    right: 1%;
    z-index: 10;
}

.slick-next:hover {
    background-image: url('/images/slider-down-arrow-hover.png');

    /* place button bottom right */
    right: 1%;
    bottom: 2%;
    z-index: 20;
}

Conclusion

As you can see, learning how to create a vertical slick slider with custom dots and arrows is not a difficult task. Most of the work is done in the CSS, but once you understand the process, versatile and custom sliders can be created quickly.