slick-carousel

ui-component carousel responsive

slick-carousel is a powerful carousel slider library that offers a wide range of customization options. It helps users easily display images, videos, HTML content, and more in a slide format. Built with responsive design and touch functionality, it works seamlessly across both mobile and desktop environments.

Latest Ver 1.9.0

Homepage

Github

28,629

📢 slick-carousel is a jQuery plugin that allows for the implementation of user-friendly carousel sliders.

CDN Download

License: MIT

Asset Type :

View All Versions

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/ajax-loader.gif

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/fonts/slick.eot

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/fonts/slick.svg

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/fonts/slick.ttf

Sample Code

⚠️ Some code, including import statements, may not run properly on jsFiddle. If it fails to execute, please copy the code and try it in your own environment.

📄 HTML
<div style='width: 50%; margin: auto;'>
  <div class='your-class'>
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
    <div><h3>6</h3></div>
  </div>
</div>

🎨 External CSS
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" rel="stylesheet">

🧩 External JS
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

⚙️ JavaScript
$(document).ready(function(){
  $('.your-class').slick();
});