Этот слайдер позволяет пользователю перемещаться между слайдами с помощью переключателей или кнопок со стрелками вручную. Он также обеспечивает функцию автоматического слайд-шоу, которое переключается между слайдами через заданное время.
Исходный код доступен здесь.
Перво-наперво, продолжайте и настройте новую папку. Я назову его «СЛАЙДЕР ИЗОБРАЖЕНИЯ», но вы можете назвать его как хотите. Затем добавьте еще 3 папки с именами «js», «css» и «image».
Откройте эту папку в текстовом редакторе по вашему выбору. Я использую Visual Studio и создаю новый файл с именем index.html в корне вашего проекта. затем создайте файл «style.css» в папке CSS и файл «script.js» в папке js.
Теперь у вас должен получиться примерно такой проект:
Теперь продолжайте и добавляйте свои изображения в папку с изображениями, неважно, сколько, какого размера или какого формата, но имя очень важно.
давайте углубимся в структуру HTML этого простого слайдера:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Slider</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="slider">
<input type="radio" name="sld" id="slide1">
<input type="radio" name="sld" id="slide2">
<input type="radio" name="sld" id="slide3">
<input type="radio" name="sld" id="slide4">
<input type="radio" name="sld" id="slide5">
<!-- slides -->
<div class="slides">
<div class="slide sli">
<img src="image/image1.jpg" alt="slide1">
</div>
<div class="slide">
<img src="image/image2.jpg" alt="slide2">
</div>
<div class="slide">
<img src="image/image3.jpg" alt="slide3">
</div>
<div class="slide">
<img src="image/image4.jpg" alt="slide4">
</div>
<div class="slide">
<img src="image/image5.jpg" alt="slide5">
</div>
</div>
<a href="#" class="arrow left"><i class="fas fa-arrow-circle-left"></i></a>
<a href="#" class="arrow right"><i class="fas fa-arrow-circle-right"></i></a>
<div class="radio">
<label for="slide1" class="radbtn active"></label>
<label for="slide2" class="radbtn"></label>
<label for="slide3" class="radbtn"></label>
<label for="slide4" class="radbtn"></label>
<label for="slide5" class="radbtn"></label>
</div>
</div>
<script src="./js/script.js"></script>
</body>
</html>
Этот HTML-код создает базовый слайдер изображения со стрелками навигации и переключателями для управления слайдами. Связанные файлы CSS и JavaScript используются для обеспечения стиля и интерактивности слайдера.
Вот объяснение кода:
1. Структура документа:
Тег «‹html›» является корневым элементом. Раздел «‹head›» содержит метаинформацию и внешние ссылки на CSS и потрясающие библиотеки шрифтов. Раздел ‹body› содержит содержание веб-страницы.
2. Слайдер изображений:
Слайдер изображения создается с помощью элемента «‹div›» с классом «slider». Он содержит набор переключателей (‹input type="radio"›) для управления слайдами. Каждый переключатель имеет уникальный идентификатор ("слайд1", "слайд2" и т. д.) и связан с определенным слайдом.
3. Слайды:
Слайды заключены в элемент «‹div›» с классом «слайды». Каждый слайд представлен элементом «‹div›» с классом «слайд». Внутри каждого слайда тег «img›» используется для отображения изображения. Атрибут «src» указывает путь к файлу изображения, а атрибут «alt» предоставляет альтернативный текст для изображения.
4. Навигация:
Стрелки навигации включены в виде тегов «‹a›» с классами «влево» и «вправо». Стрелка влево содержит красивый значок шрифта для стрелки влево. Стрелка вправо содержит красивый значок со стрелкой вправо.
5. Радиокнопки:
Переключатели представлены тегами «‹label›» с классом «radbtn». Каждый тег ‹label› связан с определенным переключателем с помощью атрибута for.
6. Тег JavaScript:
Тег сценария «‹script src=»./js/script.js»›‹/script›» ссылается на внешний файл JavaScript с именем «script.js». Этот файл, вероятно, содержит логику управления слайдером изображений.
Затем у нас есть CSS, который занимает центральное место в этом внешнем проекте:
/* slider */
input[type="radio"]{
display: none;
}
.slider {
width: 100%;
height: 100vh;
background-color: #1f242d;
color: #fff;
}
.slider .slides {
position: relative;
width: 100%;
height: 100%;
display: flex;
overflow: hidden;
}
.slider .slides .slide {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
display: flex;
transition: all 0.5s ease-in;
}
.slider .slide .sli {
opacity: 1;
}
.slider .slides .slide::after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.1;
z-index: 1;
}
.slider .slide img {
min-width: 70%;
min-height: 70%;
object-fit: cover;
transform: scale(1);
transition: all 0.5 ease-in;
margin: 10rem 14rem;
}
.slider .arrow {
position: absolute;
text-decoration: none;
z-index: 10;
color: #fff;
top: 50%;
transform: translateY(-50%);
opacity: 0.5;
transition: all 0.3 ease-in;
}
.slider .arrow:hover {
opacity: 1;
}
.slider .arrow i {
font-size: 3rem;
}
.slider .left {
left: 70px;
}
.slider .right {
right: 70px;
}
.slider .radio {
width: 100%;
position: absolute;
bottom: 20px;
z-index: 5;
display: flex;
justify-content: center;
align-items: center;
}
.slider .radio .radbtn {
width: 16px;
height: 16px;
border: 2px solid #fff;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
transition: all 0.3s ease-in;
}
.slider .radio .radbtn:hover {
background-color: #fff;
border-radius: 30%;
}
.active{
background-color: #fff;
}
Этот код CSS предоставляет необходимые стили для создания привлекательного и функционального слайдера изображений со стрелками навигации и переключателями для управления слайдами.
1. Стили для переключателей:
Селектор input[type=» radio»]» скрывает переключатели с помощью «display: none;».
2. Стиль контейнера ползунка:
Класс .slider устанавливает ширину и высоту на 100 % области просмотра (100vh). Цвет фона установлен на «#1f242d» (темный оттенок синего). Цвет текста установлен на белый (#fff).
3. Стили для контейнера слайдов:
Класс .slider .slides устанавливает относительное положение контейнера слайдов и устанавливает его ширину и высоту на 100 %. Контейнер использует flexbox (display: flex;) для выравнивания слайдов. Для свойства overflow установлено значение hidden, чтобы скрыть любое переполнение.
4. Стили для отдельных слайдов:
Класс .slider .slides .slide устанавливает для каждого слайда абсолютную позицию внутри контейнера. Ширина и высота установлены на 100%. Начальная непрозрачность установлена на 0, чтобы скрыть слайды. Свойство "переход" используется для создания эффекта плавного перехода продолжительностью 0,5 секунды.
5. Стиль для активного слайда:
Класс .slider .slide .sli задает непрозрачность активного слайда равным 1, что делает его видимым.
6. Стили для наложения слайдов:
Псевдоэлемент .slider .slides .slide::after создает эффект наложения. Он расположен абсолютно в верхнем левом углу, покрывая весь слайд. Цвет фона установлен на черный (#000). Непрозрачность установлена на 0,1, чтобы создать эффект полупрозрачности. Для свойства "z-index" установлено значение 1, чтобы оно отображалось под содержимым слайда.
7. Стили для изображений слайдов:
Класс .slider .slide img устанавливает минимальную ширину и высоту изображений слайдов на уровне 70 %. Свойство «object-fit» установлено на обложку, чтобы гарантировать, что изображение заполняет контейнер, сохраняя соотношение сторон. Свойства «преобразование» и «переход» используются для масштабирования и создания эффекта плавного перехода. Свойство "margin" настроено на создание пространства вокруг изображений.
8. Стили для стрелок навигации:
Класс .slider .arrow оформляет стрелки навигации. Позиция устанавливается абсолютной, а свойства «top» и «transform» используются для вертикального центрирования. Начальная непрозрачность установлена на 0,5, а свойство «переход» используется для создания эффекта плавного перехода. Псевдокласс «:hover» используется для изменения непрозрачности на 1 при наведении. Стиль значков с потрясающим шрифтом создается с помощью селектора «.slider .arrow I».
9. Стили для стрелок влево и вправо:
Классы .slider .left и .slider .right располагают стрелки соответственно слева и справа.
10. Стили для переключателей:
Класс .slider .radio размещает переключатели в нижней части контейнера ползунка. Он использует flexbox для центрирования (display: flex; justify-content: center; align-items: center;). Класс «.slider .radio .radbtn» стилизует отдельные переключатели. Ширина и высота установлены для создания круглых кнопок с белой рамкой. Свойство «margin» создает расстояние между кнопками. Свойство «cursor» устанавливает курсор в указатель при наведении. Свойство «transition» создает эффект плавного перехода при наведении. Класс «.slider .radio .radbtn:hover» изменяет цвет фона и радиус границы при наведении. Класс «.active» используется для выделения активного переключателя путем изменения цвета его фона.
Наконец, мы рассмотрим JavaScript. Предоставленный вами код JavaScript отвечает за функциональность ползунка изображений.
//slider
// create variable
var slide = document.querySelectorAll('.slide');
var radiobtn = document.querySelectorAll('.radbtn');
var leftArrow = document.querySelector('.left');
var rightArrow = document.querySelector('.right');
var slideInt;
var intTime = 5000; // 5s(5000ms)
//iterate all radio btn
radiobtn.forEach(function(item, index) {
item.addEventListener('click', function() {
manButtonNav(index);
});
});
rightArrow.addEventListener('click', function(e) {
e.preventDefault();
nextSlide();
clrInterval();
});
leftArrow.addEventListener('click', function(e) {
e.preventDefault();
prevSlide();
clrInterval();
});
function manButtonNav(index) {
for(var i = 0; i < slide.length; i++) {
if(i !== index) {
slide[i].classList.remove('sli');
radiobtn[i].classList.remove('active');
}
else {
slide[index].classList.add('sli');
radiobtn[index].classList.add('active');
}
}
clrInterval();
}
//next slide function
function nextSlide() {
var sli = document.querySelector('.sli');
var active = document.querySelector('.active');
//unset current slide and radio btn
sli.classList.remove('sli');
active.classList.remove('active');
//set next slide and radio btn
if(sli.nextElementSibling) {
sli.nextElementSibling.classList.add('sli');
active.nextElementSibling.classList.add('active');
}
else {
slide[0].classList.add('sli');
radiobtn[0].classList.add('active');
}
}
//previous slide function
function prevSlide() {
var sli = document.querySelector('.sli');
var active = document.querySelector('.active');
//unset current slide and radio btn
sli.classList.remove('sli');
active.classList.remove('active');
//set next slide and radio btn
if(sli.previousElementSibling) {
sli.previousElementSibling.classList.add('sli');
active.previousElementSibling.classList.add('active');
}
else {
jeepslide[slide.length - 1].classList.add('sli');
radiobtn[radiobtn.length - 1].classList.add('active');
}
}
function clrInterval() {
clearInterval(slideInt);
slideInt = setInterval(nextSlide, intTime);
}
slideInt = setInterval(nextSlide, intTime);
Этот код JavaScript обеспечивает необходимую функциональность для ручного перехода между слайдами с помощью переключателей или кнопок со стрелками. Он также включает функцию автоматического перехода между слайдами.
1. Объявления переменных:
Переменная slide хранит массив всех элементов слайда. Переменная «radiobtn» хранит массив всех элементов радиокнопки. Переменная «leftArrow» хранит ссылку на элемент со стрелкой влево. Переменная «rightArrow» хранит ссылку на элемент со стрелкой вправо. Переменная «slideInt» хранит идентификатор интервала для интервала слайда. В переменной "intTime" хранится продолжительность каждого слайда в миллисекундах.
2. Слушатели событий радиокнопки:
Код перебирает все переключатели с помощью метода forEach. К каждой радиокнопке добавляется прослушиватель событий, запускающий функцию «manButtonNav» при нажатии. Функция «manButtonNav» отвечает за управление навигацией при нажатии переключателя.
3. Слушатели событий кнопки со стрелкой:
Прослушиватели событий добавляются к кнопкам со стрелками влево и вправо. При клике вызывается функция «nextSlide» или «prevSlide» соответственно. Функция clrInterval также вызывается для очистки интервала слайдов и его перезапуска.
4. Функция «manButtonNav»:
Эта функция обрабатывает навигацию при нажатии переключателя. Он перебирает все слайды и переключатели. Если текущий индекс не соответствует выбранному индексу, соответствующий слайд и переключатель удаляются из «активного» состояния. Если текущий индекс соответствует выбранному индексу, соответствующий слайд и переключатель добавляются в «активное» состояние. Функция clrInterval вызывается для очистки интервала слайдов и его перезапуска.
5. Функция «следующий слайд»:
Эта функция обрабатывает переход к следующему слайду. Он получает текущий слайд и активную радиокнопку с помощью «querySelector». Текущий слайд и активная радиокнопка удаляются из состояний «sli» и «active». Если есть следующий одноуровневый слайд, если он есть, он добавляет соответствующие классы к следующему слайду и переключателям. Если следующего одноуровневого слайда нет, он выбирает первый слайд и переключатель, чтобы создать эффект цикла.
6. Функция «предыдущий слайд»:
Эта функция обрабатывает переход к предыдущему слайду. Она следует той же логике, что и функция nextSlide, но вместо этого обрабатывает предыдущий одноуровневый слайд.
7. Функция «clrInterval»:
Эта функция очищает интервал слайдов с помощью «clearInterval». Он вызывается перед переходом к следующему или предыдущему слайду, чтобы обеспечить плавную навигацию вручную. После очистки интервала он устанавливает новый интервал, используя «setInterval» и функцию «nextSlide».
8. Начальный интервал между слайдами:
Интервал между слайдами изначально задается с помощью setInterval и функции nextSlide. Это запускает автоматический переход между слайдами на основе указанной продолжительности «intTime».
