Here is a sample code for creating a carousel using jQuery:
<!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 class="carousel">
<div><img src="https://www.jaybranding.com/wp-content/uploads/2023/03/img_641ae83ac2627.png" alt="Slide 1"></div>
<div><img src="https://www.jaybranding.com/wp-content/uploads/2023/03/img_641ae83be130a.png" alt="Slide 2"></div>
<div><img src="https://www.jaybranding.com/wp-content/uploads/2023/03/img_641ae83d05391.png" alt="Slide 3"></div>
<div><img src="https://www.jaybranding.com/wp-content/uploads/2023/03/img_641ae83dedd5c.png" alt="Slide 4"></div>
<div><img src="https://www.jaybranding.com/wp-content/uploads/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>
This code uses the Slick carousel plugin, which can be downloaded from the Slick website.
The carousel
class is used to identify the container element for the carousel. The slick()
function is used to initialize the plugin, with various options like autoplay
, dots
, slidesToShow
, and slidesToScroll
being set to customize the carousel. Additionally, the responsive
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.