Slick Slider with single slide

Slick Slider With single slide

Slick slider with single slides looks like 

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 jquery script so you want get any error. Slick-theme.css is used for arrows around slider. After adding the script and css we have to add images which we want to show inside 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 same html inside your code and after that you need to add slick slider initialisation.

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

So, now just run the project and you can see your single slider will be working like we have showed in the first image. However if you see you 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.