How to Create a Slick Slider with Single Slide

09 May
2021

Slick Slider with single slide

by Shubham Batra

7038

This article will show how to create a slick slider with a single slide. It is used for creating image carousal.

So for this slider we need to add few cdn's before using.Go to your view and add these Slick Slider cdn.

  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet" />

So, use these after the jquery script so you won't get any errors. Slick-theme.css is used for arrows around the slider. After adding the script and CSS we have to add images that we want to show inside the slick slider.

<div class="row" style="text-align:center">
    <h1>Single Item</h1>
    <div class="single-item" style="width:500px;margin:auto auto">
        <div>
            <img style="width:500px;height:500px" src="https://www.androidpolice.com/wp-content/uploads/2020/12/15/Wallpaper-of-the-Week-2020-4-scaled.jpg" />
        </div>
        <div>
            <img style="width:500px;height:500px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRfhrqVBL-0hEtWOj5N9Da6Nh23igvGt_1kKA&usqp=CAU" />
        </div>
        <div>
            <img style="width:500px;height:500px" src="https://www.androidpolice.com/wp-content/uploads/2020/12/15/Wallpaper-of-the-Week-2020-4-scaled.jpg" />
        </div>
        <div>
            <img style="width:500px;height:500px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRfhrqVBL-0hEtWOj5N9Da6Nh23igvGt_1kKA&usqp=CAU" />
        </div>
        <div>
            <img style="width:500px;height:500px" src="https://www.androidpolice.com/wp-content/uploads/2020/12/15/Wallpaper-of-the-Week-2020-4-scaled.jpg" />
        </div>
        <div>
            <img style="width:500px;height:500px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRfhrqVBL-0hEtWOj5N9Da6Nh23igvGt_1kKA&usqp=CAU" />
        </div>
    </div>
</div>

So, you can use the exact html inside your code and after that, you need to add slick slider initialization.

<script>
    $(document).ready(function () {
        $('.single-item').slick();
	})
</script>

So, now just run the project and you can see your single slider will work as we showed in the first image. However, if you see your arrows are not visible. Then you can add this CSS

<style>
        .slick-prev:before, .slick-next:before {
            color: red;
        }
    </style>

So, this will make your arrows visible which you can use to toggle the slick slider slides. There are many more attributes you can use in slick slider for modifying the slider display. We will see them in our next blog. You can have a look at Slick-Slider for more options on Code2Night.

This article will show how to create a slick slider with a single slide. It is used for creating image carousal.

Comments