JSFiddle - React, Tailwind, and code Playground

by Tinh Nguyen Nhu

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Slick</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
	<style>
		.box_slide .slick-slide img {
			width: 100%;
		}
	</style>
	<script>
		$(function() {
			$('.box_slide').slick({
				slidesToShow: 3,
				slidesToScroll: 1,
				speed: 600,
				autoplaySpeed: 5000,
				autoplay: true,
				infinite: true,
				swipe: true,
				fade: false,
				dots: false,
				arrows: true,
				responsive: [
					{
						breakpoint: 480,
						settings: {
							slidesToShow: 1
						}
					}
				]
			});
		});
	</script>
</head>
<body>
	<div class="box_slide">
		<div><img src="https://via.placeholder.com/400x200" alt="demo"></div>
		<div><img src="https://via.placeholder.com/400x200" alt="demo"></div>
		<div><img src="https://via.placeholder.com/400x200" alt="demo"></div>
		<div><img src="https://via.placeholder.com/400x200" alt="demo"></div>
		<div><img src="https://via.placeholder.com/400x200" alt="demo"></div>
	</div>
</body>
</html>