<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- Slick Carousel CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"
/>
</head>
<body>
<div class="carousel">
<div><img src="img1.jpg" alt="Слайд 1" />Слайд 1</div>
<div><img src="img1.jpg" alt="Слайд 2" />Слайд 2</div>
<div><img src="img1.jpg" alt="Слайд 3" />Слайд 3</div>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Slick Carousel JS -->
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
.carousel {
max-width: 800px;
margin: 0 auto;
}
.carousel img {
width: 100%;
height: auto;
display: block;
}
$(document).ready(function () {
$(".carousel").slick({
dots: true, // точки-индикаторы
arrows: true, // стрелки навигации
infinite: true, // бесконечная прокрутка
speed: 500, // скорость анимации
autoplay: true, // автопрокрутка
autoplaySpeed: 3000, // интервал в мс
slidesToShow: 1, // слайдов на экране
slidesToScroll: 1, // слайдов за прокрутку
});
});
Простой
