Simple Carousel using jQuery

Here is a sample code for creating a carousel using jQuery: <pre data-lang="HTML"><code><!DOCTYPE html> <html> <head> <title>Sample Carousel</title> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css"/> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css"/> </head> <body> <div> <div><img src="/media/2023/03/img_641ae83ac2627.png" alt="Slide 1"></div> <div><img src="/media/2023/03/img_641ae83be130a.png" alt="Slide 2"></div> <div><img src="/media/2023/03/img_641ae83d05391.png" alt="Slide 3"></div> <div><img src="/media/2023/03/img_641ae83dedd5c.png" alt="Slide 4"></div> <div><img src="/media/2023/03/img_641ae83ee5f8e.png" alt="Slide 5"></div> </div> <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script> <script> $(document).ready(function(){ $('.carousel').slick({ autoplay: true, dots: true, infinite: true, speed: 500, slidesToShow: 3, slidesToScroll: 1, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 2, slidesToScroll: 1, infinite: true, dots: true } }, { breakpoint: 600, settings: { slidesToShow: 1, slidesToScroll: 1 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } } ] }); }); </script> </body> </html> </code></pre> This code uses the Slick carousel plugin, which can be downloaded from the Slick website. The <code>carousel</code> class is used to identify the container element for the carousel. The <code>slick()</code> function is used to initialize the plugin, with various options like <code>autoplay</code>, <code>dots</code>, <code>slidesToShow</code>, and <code>slidesToScroll</code> being set to customize the carousel. Additionally, the <code>responsive</code> option is used to make the carousel responsive for different device sizes. This sample code can be modified to include different images and options, as needed.