< Back to Code

Simple Carousel using jQuery

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.

© Copyright by JAYbranding – All rights reserved.

Chúng tôi mong muốn tư vấn chi tiết hơn cho quý khách.
Vui lòng nhập thông tin để nhận tự vấn