Простой пример слайдера, чтобы вы могли начать. Этот пример использует только HTML и CSS для создания базового слайдера без дополнительных функций, таких как автоматическое воспроизведение или стрелки навигации.
- HTML:
<!DOCTYPE html>
<html lang=»en»>
<head>
<meta charset=»UTF-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<link rel=»stylesheet» href=»styles.css»>
<title>Слайдер</title>
</head>
<body>
<div class=»slider»>
<div class=»slide»>
<img src=»slide1.jpg» alt=»Slide 1″>
</div>
<div class=»slide»>
<img src=»slide2.jpg» alt=»Slide 2″>
</div>
<div class=»slide»>
<img src=»slide3.jpg» alt=»Slide 3″>
</div>
</div>
</body>
</html>
2.CSS (styles.css):
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
overflow: hidden;
}
.slider {
display: flex;
overflow: hidden;
width: 100%;
height: 400px; /* Высота слайдера */
}
.slide {
flex: 1;
min-width: 100%;
transition: transform 0.5s ease-in-out;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Добавьте анимацию для перемещения слайдов (слева направо) */
.slider:hover .slide {
transform: translateX(-100%);
}
/* Сброс анимации при переключении слайдов */
.slider:hover .slide:nth-child(1) {
transform: translateX(0);
}
В этом коде создается базовый слайдер с тремя слайдами. При наведении курсора на слайдер, слайды будут перемещаться слева направо с использованием CSS-анимации. Первый слайд восстанавливает свою позицию, когда он становится невидимым, что позволяет вам бесконечно переключать слайды.
Вы можете заменить изображения (
slide1.jpg,slide2.jpg, иslide3.jpg) на свои собственные изображения и настроить высоту слайдера, а также другие стили в соответствии с вашими потребностями. (Так же кавычки в в рабочем коде заменяете открывающие на открывающие и закрывающие на закрывающие соответсвенно!).