2022
Responsive Slick Slider
630
27
Responsive Slick Slider
Slick slider can be configured to work reponsive as per the screen size. You can manage it to show different number of slides on different screen sizes. We will see how to do that.
So first of all add these cdn's in your project layout page.
Step 1: Online Cdn of Jquery and Slick
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<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" />Step 2: Script For Slick Slider
After adding the cdn's in the layout page we have to add script to initialize slick in responsive mode. We will add breakdown points in the responsive array and we will mention number of slides that we want to show for that case.
<script>
$(document).ready(function () {
$('.slider').slick({
slidesToShow: 4,
slidesToScroll:4,
dots: true,
infinite: true,
cssEase: 'linear',
arrow: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
</script>Step 3: Html Code
Now we will add some images in our html page . Then we will initialize that as slick slider. You can copy the images from here to show slider.
<div class="slider">
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
</div>
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
</div>
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
</div>
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
</div>
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
</div>
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
</div>
</div>Step 4: Complete Code Of Html And Script
This is the complete view that you should have to create your responsive slick slider. You have to remember to put your script in correct order to make it work.
@{
ViewBag.Title = "Home Page";
}
<html>
<head>
<style>
.slider {
width: 650px;
margin: 0 auto;
}
img {
width: 200px;
height: 200px;
}
.slick-prev:before, .slick-next:before {
font-family: 'slick';
font-size: 20px;
line-height: 1;
opacity: .75;
color: gray !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
</head>
<body style="margin-top: 62px !important;">
<div class="row">
<div class="slider">
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
</div>
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
</div>
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
</div>
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
</div>
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
</div>
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<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" />
<script>
$(document).ready(function () {
$('.slider').slick({
slidesToShow: 4,
slidesToScroll:4,
dots: true,
infinite: true,
cssEase: 'linear',
arrow: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
</script>
</body>
</html>
Step 5: Now run the application
Now run your application and you will see slick slider intialized with 4 slides. Now try to reduce the screen width and you will see at one point it will break down to 3 images and if you keep reducing the width it will start showing 2 slides.
Here we can see 4 slides as screen is showing up to full width
Here you can see 3 slides per screen, as width is reduced from full window
Here you can see 2 images are visible in slider as width is reduced to less size.
So you can notice slider changing it's slides as per the device width. So this is how you can create responsive slick slider in Asp.Net.
