В этом примере слайдер показывает три изображения в виде слайдов. Изображения заданы в массиве $images
, и каждое изображение отображается с помощью тега <img>
. Стили CSS определяют размеры и внешний вид слайдера. С помощью JavaScript и функции showSlides()
происходит автоматическая смена слайдов каждые 2 секунды.
Обратите внимание, что вам необходимо заменить пути к изображениям в массиве $images
на фактические пути к вашим изображениям. Кроме того, убедитесь, что у вас есть папка «images» с изображениями в том же каталоге, где находится ваш файл PHP.
<!DOCTYPE html>
<html>
<head>
<title>Пример слайдера на PHP</title>
<style>
/* Стили для слайдера */
.slider {
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
border: 1px solid #ccc;
}
.slider img {
width: 100%;
height: 100%;
display: none;
}
.slider img.active {
display: block;
}
</style>
</head>
<body>
<h1>Пример слайдера на PHP</h1>
<div class=»slider»>
<?php
// Массив с путями к изображениям
$images = [
‘images/slide1.jpg’,
‘images/slide2.jpg’,
‘images/slide3.jpg’
];
// Отображаем каждое изображение в слайдере
foreach ($images as $index => $image) {
// Устанавливаем класс «active» для первого изображения
$class = ($index == 0) ? ‘active’ : »;
echo ‘<img src=»‘ . $image . ‘» class=»‘ . $class . ‘»>’;
}
?>
</div>
<script>
// JavaScript для автоматической смены слайдов
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName(«slider»)[0].getElementsByTagName(«img»);
// Скрываем все изображения
for (i = 0; i < slides.length; i++) {
slides[i].style.display = «none»;
}
// Увеличиваем индекс и отображаем соответствующее изображение
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
slides[slideIndex — 1].style.display = «block»;
// Вызываем функцию снова через 2 секунды
setTimeout(showSlides, 2000);
}
</script>
</body>
</html>