Introduction
हेलो दोस्तों आज हम इस post में slick slider का इस्तेमाल कैसे कर सकते है, अपनी website में यह detail से example के साथ
समजेंगे!.Slick slider एक jQuery library है, जो किसी भी HTML elements के साथ काम करता है!. Slick slider jQuery library websites पर responsive और customizable sliders और carousels बनाने के लिए एक powerful tool है!.
Slick slider jQuery library के features जैसे के,
Responsive design
Slick slider को responsivesness को दयान में रखकर बनाया गया है, जो आपके slider को different screen sizes और devices के अनुकूल बनाने की अनुमति देता है!.
Touch swipe support
Slick slider touchscreen device पर touch swipe feature को supports करता है, जिससे users के लिए mobile और tablet device पर slides के माद्यम से navigate करना आसान हो जाता है!.
Multiple Navigation options
Slick users को slide के माद्यम से navigate करने के लिए arrow, dots, thumbnails और बहुत कुछ सहित navigate करने के option provide करता है!.
Customizable transitions
हम slick slider में slide animation setup कर सकते है, जैसे slide fade animation, slide speed, slide lightbox effect
Infinite looping
Slick infinite looping को supports करता है, जिसमे आपका slider continuously slide होता रहेगा!.
Autoplay
हम autoplay featured का इस्तेमाल करके slick को एक निश्चित interval पर slide को autoplay रूप से चलने के लिए configure कर सकते है!.
जिसमे आप autoplay speed को भी control कर सकते है और hover पर slide autoplay को रोक सकते है!.
Lazy loading
Slick images की lazy loading को supports करता है, जो images को केवल तब load करके page load performance में improve करता है जब वे display होने वाली होती है!.
slick slider के और बी feature available है जैसे के Accessibility features, customizable settings, Rich API, Extensible and Themable.
Slick slider का इस्तेमाल कैसे कर सकते है?
Slider एक jQuery library है, तो slick slider को अपनी website में इस्तेमाल करने के लिए slick slider के supportive css files और jQuery file को include करना जरुरी होता है!.
Slick slider css file
<!-- Slick CSS --> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"/> <!-- Slick theme CSS --> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"/>
HTML elements for slick slider
<div class="slick-slider">
<div>
<div class="sli">
<h2>Slide 1</h2>
<p>
"Lorem ipsum dolor sit amet",<br>
"Consectetur adipiscing elit",<br>
"Sed do eiusmod tempor incididunt",<br>
"Ut labore et dolore magna aliqua",<br>
"Ut enim ad minim veniam"
</p>
</div>
</div>
<div>
<div class="sli">
<h2>Slide 2</h2>
<p>
"Lorem ipsum dolor sit amet",<br>
"Consectetur adipiscing elit",<br>
"Sed do eiusmod tempor incididunt",<br>
"Ut labore et dolore magna aliqua",<br>
"Ut enim ad minim veniam"
</p>
</div>
</div>
<div>
<div class="sli">
<h2>Slide 3</h2>
<p>
"Lorem ipsum dolor sit amet",<br>
"Consectetur adipiscing elit",<br>
"Sed do eiusmod tempor incididunt",<br>
"Ut labore et dolore magna aliqua",<br>
"Ut enim ad minim veniam"
</p>
</div>
</div>
<div>
<div class="sli">
<h2>Slide 4</h2>
<p>
"Lorem ipsum dolor sit amet",<br>
"Consectetur adipiscing elit",<br>
"Sed do eiusmod tempor incididunt",<br>
"Ut labore et dolore magna aliqua",<br>
"Ut enim ad minim veniam"
</p>
</div>
</div>
<div>
<div class="sli">
<h2>Slide 5</h2>
<p>
"Lorem ipsum dolor sit amet",<br>
"Consectetur adipiscing elit",<br>
"Sed do eiusmod tempor incididunt",<br>
"Ut labore et dolore magna aliqua",<br>
"Ut enim ad minim veniam"
</p>
</div>
</div>
<div>
<div class="sli">
<h2>Slide 6</h2>
<p>
"Lorem ipsum dolor sit amet",<br>
"Consectetur adipiscing elit",<br>
"Sed do eiusmod tempor incididunt",<br>
"Ut labore et dolore magna aliqua",<br>
"Ut enim ad minim veniam"
</p>
</div>
</div>
<div>
<div class="sli">
<h2>Slide 7</h2>
<p>
"Lorem ipsum dolor sit amet",<br>
"Consectetur adipiscing elit",<br>
"Sed do eiusmod tempor incididunt",<br>
"Ut labore et dolore magna aliqua",<br>
"Ut enim ad minim veniam"
</p>
</div>
</div>
<div>
<div class="sli">
<h2>Slide 8</h2>
<p>
"Lorem ipsum dolor sit amet",<br>
"Consectetur adipiscing elit",<br>
"Sed do eiusmod tempor incididunt",<br>
"Ut labore et dolore magna aliqua",<br>
"Ut enim ad minim veniam"
</p>
</div>
</div>
<div>
<div class="sli">
<h2>Slide 9</h2>
<p>
"Lorem ipsum dolor sit amet",<br>
"Consectetur adipiscing elit",<br>
"Sed do eiusmod tempor incididunt",<br>
"Ut labore et dolore magna aliqua",<br>
"Ut enim ad minim veniam"
</p>
</div>
</div>
</div>
Slick slider jQuery
<!-- jQuery --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- Slick JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script>
$(document).ready(function(){
$('.slick-slider').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
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>
Full source code
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Slick slider</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<!-- Slick CSS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"/>
<!-- Slick theme CSS (optional) -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"/>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Slick JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<style> /* Example CSS for Slick slider */
.slick-slider {
width: 100%;
}
.slick-slider img {
width: 100%;
height: auto;
}
.sli { text-align: center; }
</style>
</head>
<body>
<div class="sli">
<h1>Slick slider</h1><hr>
</div>
<div class="slick-slider">
<div>
<div class="sli">
<h2>Slide 1</h2>
<p>
"Lorem ipsum dolor sit amet",<br>
"Consectetur adipiscing elit",<br>
"Sed do eiusmod tempor incididunt",<br>
"Ut labore et dolore magna aliqua",<br>
"Ut enim ad minim veniam"
</p>
</div>
</div>
<div>
<div class="sli">
<h2>Slide 2</h2>
<p>
"Lorem ipsum dolor sit amet",<br>
"Consectetur adipiscing elit",<br>
"Sed do eiusmod tempor incididunt",<br>
"Ut labore et dolore magna aliqua",<br>
"Ut enim ad minim veniam"
</p>
</div>
</div>
<div>
<div class="sli">
<h2>Slide 3</h2>
<p>
"Lorem ipsum dolor sit amet",<br>
"Consectetur adipiscing elit",<br>
"Sed do eiusmod tempor incididunt",<br>
"Ut labore et dolore magna aliqua",<br>
"Ut enim ad minim veniam"
</p>
</div>
</div>
<div>
<div class="sli">
<h2>Slide 4</h2>
<p>
"Lorem ipsum dolor sit amet",<br>
"Consectetur adipiscing elit",<br>
"Sed do eiusmod tempor incididunt",<br>
"Ut labore et dolore magna aliqua",<br>
"Ut enim ad minim veniam"
</p>
</div>
</div>
<div>
<div class="sli">
<h2>Slide 5</h2>
<p>
"Lorem ipsum dolor sit amet",<br>
"Consectetur adipiscing elit",<br>
"Sed do eiusmod tempor incididunt",<br>
"Ut labore et dolore magna aliqua",<br>
"Ut enim ad minim veniam"
</p>
</div>
</div>
<div>
<div class="sli">
<h2>Slide 6</h2>
<p>
"Lorem ipsum dolor sit amet",<br>
"Consectetur adipiscing elit",<br>
"Sed do eiusmod tempor incididunt",<br>
"Ut labore et dolore magna aliqua",<br>
"Ut enim ad minim veniam"
</p>
</div>
</div>
<div>
<div class="sli">
<h2>Slide 7</h2>
<p>
"Lorem ipsum dolor sit amet",<br>
"Consectetur adipiscing elit",<br>
"Sed do eiusmod tempor incididunt",<br>
"Ut labore et dolore magna aliqua",<br>
"Ut enim ad minim veniam"
</p>
</div>
</div>
<div>
<div class="sli">
<h2>Slide 8</h2>
<p>
"Lorem ipsum dolor sit amet",<br>
"Consectetur adipiscing elit",<br>
"Sed do eiusmod tempor incididunt",<br>
"Ut labore et dolore magna aliqua",<br>
"Ut enim ad minim veniam"
</p>
</div>
</div>
<div>
<div class="sli">
<h2>Slide 9</h2>
<p>
"Lorem ipsum dolor sit amet",<br>
"Consectetur adipiscing elit",<br>
"Sed do eiusmod tempor incididunt",<br>
"Ut labore et dolore magna aliqua",<br>
"Ut enim ad minim veniam"
</p>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.slick-slider').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
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>
