Code2night
  • Home
  • Blogs
  • Tutorial
  • Post Blog
  • Tools
    • Json Beautifier
    • Html Beautifier
  • Members
    • Register
    • Login
  1. Home
  2. Blogpost
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.

  • |
  • Slick Slider , Slick Slider , Slick Slider with single slide , Slick , AspNet

Comments

Follow Us On Social Media - Like Us On Facebook

Best Sellers

product 1

Hand Hug Bracelet For Women Men Cuff Bangle Adjustable Lover Couple Bracelets

Can be given as a gift to your family, relatives, or friends

Buy $15.99
product 1

Teddy bear hug bear plush toy bear cub

Can be given as a gift to your family, relatives, or friends


Buy $49.99

Tags

LinkedinLogin
LinkedinProfile
GetLinkedinProfile
C#
Aspnet
MVC
Linkedin
ITextSharp
Export to Pdf
AspNet Core
AspNet
View to Pdf in Aspnet
Model Validation In ASPNET Core MVC 60
Model Validation
Model Validation In ASPNET Core MVC
Model Validation In ASPNET
Image Compression in AspNet
Compress Image in c#
AspNet MVC
Thank you for Downloading....!

Subscribe for more tutorials

Support our team

Continue with Downloading

Welcome To Code2night, A common place for sharing your programming knowledge,Blogs and Videos

  • Panipat
  • info@Code2night.com

Links

  • Home
  • Blogs
  • Tutorial
  • Post Blog

Popular Tags

Copyright © 2023 by Code2night. All Rights Reserved

  • Home
  • Blog
  • Login
  • SignUp
  • Contact
  • Terms & Conditions
  • Refund Policy
  • About Us
  • Privacy Policy
  • Json Beautifier