Skip to content

Instantly share code, notes, and snippets.

@mitesh9991

mitesh9991/index.html

Created November 30, 2022 05:11
Show Gist options
  • Save mitesh9991/dcfb65c7fba852c9d78de4249af03875 to your computer and use it in GitHub Desktop.
Save mitesh9991/dcfb65c7fba852c9d78de4249af03875 to your computer and use it in GitHub Desktop.
Download ZIP
Slick carousel example
Raw
index.html
<div class="wrapper">
<h2>Slick Carousel Example<h2>
<div class="carousel">
<div><img src="https://picsum.photos/300/200?random=1"></div>
<div><img src="https://picsum.photos/300/200?random=2"></div>
<div><img src="https://picsum.photos/300/200?random=3"></div>
<div><img src="https://picsum.photos/300/200?random=4"></div>
<div><img src="https://picsum.photos/300/200?random=5"></div>
<div><img src="https://picsum.photos/300/200?random=6"></div>
</div>
</div>
Raw
script.js
$(document).ready(function(){
$('.carousel').slick({
slidesToShow: 3,
dots:true,
centerMode: true,
});
});
// Slick version 1.5.8
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.min.js"></script>
Raw
style.css
html, body{
background-color: #e74c3c;
}
.wrapper{
width:100%;
padding-top: 20px;
text-align:center;
}
h2{
font-family:sans-serif;
color:#fff;
}
.carousel{
width:90%;
margin:0px auto;
}
.slick-slide{
margin:10px;
}
.slick-slide img{
width:100%;
border: 2px solid #fff;
}
.wrapper .slick-dots li button:before {
font-size:20px;
color:white;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick-theme.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment