Как создать слайдер с помощью JS, HTML и CSS

  • 639 просмотров
  • 12 минута чтения
Хади Бахадори
  • 16 июня 2024 г.
0 Акции
0
0
0
0
0
Акции
0
0
0
0

Введение

Слайдеры — это последовательность кадров, каждый из которых можно прокручивать по очереди. Кадры в слайдере могут представлять собой изображения, видео или даже HTML-элементы (например, описания или комментарии). Слайдеры присутствуют на многих современных веб-сайтах. Разработчики используют слайдеры, когда им нужно передать информацию о веб-сайте, но при этом не хотят, чтобы она занимала слишком много места.

Например, предположим, разработчик создает веб-сайт продукта. В этом случае он может захотеть показать пользователям отзывы или обзоры, чтобы те могли им доверять и покупать его продукцию. Разработчик может создать слайдер, где пользователи смогут легко просматривать и читать каждый отзыв. То же самое можно сделать с изображениями товаров: разработчик может создать слайдер изображений, чтобы пользователь мог получить 360-градусный обзор продукта.

Предпосылки

Мы научимся создавать простой слайдер изображений на CSS, используя HTML, CSS и JavaScript. Для полного понимания происходящего и того, что мы делаем, необходимо предварительно ознакомиться с некоторыми понятиями. Давайте рассмотрим их.

  • HTML: Вам необходимы базовые знания HTML, такие как элементы и теги. Мы будем использовать различные теги и элементы для создания слайдера, поэтому вы должны понимать, для чего предназначен каждый тег или элемент в нашем слайдере.
  • CSS: Для создания слайдера мы будем активно использовать CSS. Вам следует ознакомиться с несколькими промежуточными понятиями CSS, такими как стекирование, z-индекс, позиционирование и анимация. Все это понадобится при создании слайдера.
  • JavaScript: Вам следует знать основы JavaScript, такие как объявление переменных, использование циклов for и манипуляции с DOM. Они используются для управления ползунком и создания эффектов.

Как только вы освоите все эти понятия, давайте создадим слайдер. Мы шаг за шагом рассмотрим каждое понятие и объясним, почему мы делаем то, что делаем.

Шаг 1: Создайте базовый макет слайдера изображений, используя HTML-код.

Давайте создадим базовый каркас нашего слайдера. Как мы уже говорили выше, слайдеры — это набор фреймов. Мы создадим слайдер изображений на основе CSS.

Сначала мы создаём родительский div, который содержит изображения слайдера и его функциональность. Мы также добавляем некоторые стили, например, изменяем цвет фона и задаём высоту и ширину родительского div.

<!DOCTYPE html>
<html>
<head>
<title>Slider in CSS</title>
<style>
</style>
</head>
<body>
<div id="parent-container">
<!-- This div will contain all images and buttons we will be using for Slider
-->
</div>
</body>
</html>

После этого перейдём к следующей части.

Шаг 2: Добавьте кнопки «Предыдущая» и «Следующая».

Слайдеры имеют две кнопки: «предыдущая» и «следующая». Они используются для навигации по кадрам слайдера. Мы добавим простые кнопки в родительский раздел. Эти кнопки помогут пользователю перемещаться по изображениям в карусели. Для простоты мы будем использовать символы < и > в качестве текста кнопок, которые обозначают «предыдущая» и «следующая» соответственно.

Помимо добавления базовых HTML-кнопок, мы также немного изменим их выравнивание по вертикали относительно центрального блока div. Это делается для упрощения прокрутки слайдера. Для вертикального выравнивания кнопок мы будем использовать относительное позиционирование.

<!DOCTYPE html>
<html>
<head>
<title>Slider in CSS</title>
<style>

body{
background-color: rgb(58, 58, 58);
margin-top: 100px;
}
.carousel-container {
width: 600px;
height: 400px;
position: relative;
margin: 0 auto;

}

.navigation-buttons .previous {
position: absolute;
z-index: 10;
font-size: 25px;
top: 40%;
left: 10px;
font-weight: 700;
}

.navigation-buttons .next {
right: 10px;
position: absolute;
font-size: 25px;
z-index: 10;
top: 40%;
}

.navigation-buttons .nav-btn {
background: rgba(255, 255, 255, 0.55);
cursor: pointer;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}

.navigation .nav-btn:hover {
background: white;
}

</style>
</head>
<body>

<div id="parent-container">

<div class="navigation-buttons">
<div class="previous nav-btn"><</div>
<div class="next nav-btn">></div>
</div>

</div>

</body>
</html>
Выход

Шаг 3: Добавьте необходимые изображения и текст в слайдер.

После добавления кнопок пришло время добавить изображения. Мы будем использовать изображения цветов для создания слайдера изображений на CSS. Изображения будут располагаться друг над другом с помощью свойства `position` и свойства `z-index`. Поскольку нам нужно, чтобы было видно только одно изображение, мы используем базовый класс и установим его видимость в значение `visible`. Остальные изображения будут скрыты, чтобы предотвратить их отображение пользователю.

В слайдере также отображается текст, показывающий, какое изображение пользователь просматривает в данный момент. Это помогает пользователю понять, сколько изображений находится в карусели и в каком порядке они расположены.

<!DOCTYPE html>
<html>
<head>
<title>Slider in CSS</title>
<style>

body{
background-color: rgb(58, 58, 58);
margin-top: 100px;
}
.carousel-container {
width: 600px;
height: 400px;
position: relative;
margin: 0 auto;

}

.navigation-buttons .previous {
position: absolute;
z-index: 10;
font-size: 25px;
top: 40%;
left: 10px;
font-weight: 700;
}

.navigation-buttons .next {
right: 10px;
position: absolute;
font-size: 25px;
z-index: 10;
top: 40%;
}

.navigation-buttons .nav-btn {
background: rgba(255, 255, 255, 0.55);
cursor: pointer;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}

.navigation .nav-btn:hover {
background: white;
}

.slider-carousel {
margin-top: 20px;
transition: all 0.3s ease;

}
.slider-carousel img {
width: 100%;
transition: all 0.3s ease;
border:8px solid white;
}

.images {
position: absolute;
display: none;
}

.main {
display: block;
}

.image-text {
position: absolute;
bottom: 0;
width: 103%;
display: flex;
font-size: 20px;
justify-content: center;
align-items: center;
color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0.3);
height: 35px;
}

</style>
</head>
<body>

<div id="parent-container">
<div class="navigation-buttons">
<div class="previous nav-btn"><</div>
<div class="next nav-btn">></div>
</div>

<div class="slider-carousel">
<div class="images main">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg" alt="flower 1" />
<div class="image-text">Image 1</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg" alt="flower 2" />
<div class="image-text">Image 2</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="flower 3" />
<div class="image-text">Image 3</div>
</div>
</div>
</div>
</body>
</html>
Выход

Шаг 4: Активируйте две кнопки с помощью кода JavaScript.

Мы создали класс для слайдера и добавили в него все изображения. Теперь нам нужно включить кнопки «Предыдущее» и «Следующее». Для этого мы будем использовать JavaScript.

Во-первых, нам нужно добавить обработчик событий к этим кнопкам. Каждый раз, когда пользователь нажимает на кнопку «Предыдущая» или «Следующая», должно выполняться действие, связанное с этой кнопкой. Итак, как мы это сделаем?

Мы использовали класс `main`, чтобы указать, какое изображение должно быть видно пользователю. Нам нужно контролировать, какое изображение будет иметь этот класс. Любое другое изображение будет скрыто, и пользователю будет видно только изображение с классом `main`. Для этого мы будем использовать манипуляции с DOM. Манипуляции с DOM позволяют нам удалить класс `main` из существующего изображения и добавить его к новому изображению.

Чтобы определить, какому изображению следует присвоить класс main, мы используем обработчики событий кнопок «Предыдущее» и «Следующее». Сначала нам нужно получить все изображения в слайдере. Мы видим, что родительский слайдер-карусель имеет разделение изображений. Мы можем получить это с помощью селектора запроса в DOM. Теперь, когда у нас есть все div-элементы с изображениями, нам нужно выбрать соответствующий и добавить к нему класс main. Остальные не будут иметь класса main и, следовательно, будут невидимы для пользователя. Мы можем инициализировать переменную, которая изначально указывает на 0. Эта переменная сообщает нам, какое изображение в данный момент видно пользователю. Каждый раз, когда пользователь нажимает «Следующее» или «Предыдущее», мы соответственно увеличиваем или уменьшаем значение переменной. Если значение равно 0, и пользователь нажимает на предыдущее значение, мы изменяем значение на (количество изображений в div - 1). Аналогично, если переменная находится на последнем изображении, и пользователь нажимает «Следующее», мы изменяем значение на 0.

<!DOCTYPE html>
<html>
<head>
<title>Slider in CSS</title>
<style>

body{
background-color: rgb(58, 58, 58);
margin-top: 100px;
}
.carousel-container {
width: 600px;
height: 400px;
position: relative;
margin: 0 auto;

}

.navigation-buttons .previous {
position: absolute;
z-index: 10;
font-size: 25px;
top: 40%;
left: 10px;
font-weight: 700;
}

.navigation-buttons .next {
right: 10px;
position: absolute;
font-size: 25px;
z-index: 10;
top: 40%;
}

.navigation-buttons .nav-btn {
background: rgba(255, 255, 255, 0.55);
cursor: pointer;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}

.navigation .nav-btn:hover {
background: white;
}

.slider-carousel {
margin-top: 20px;
transition: all 0.3s ease;

}
.slider-carousel img {
width: 100%;
transition: all 0.3s ease;
border:8px solid white;
}

.images {
position: absolute;
display: none;
}

.main {
display: block;
}

.image-text {
position: absolute;
bottom: 0;
width: 103%;
display: flex;
font-size: 20px;
justify-content: center;
align-items: center;
color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0.3);
height: 35px;
}

</style>
</head>
<body>

<div id="parent-container">

<div class="navigation-buttons">
<div class="previous nav-btn"><</div>
<div class="next nav-btn">></div>
</div>

<div class="slider-carousel">
<div class="images main">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg" alt="flower 1" />
<div class="image-text">Image 1</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg" alt="flower 2" />
<div class="image-text">Image 2</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="flower 3" />
<div class="image-text">Image 3</div>
</div>
</div>

</div>

<script>

const previous = document.querySelector('.previous');
const next = document.querySelector('.next');
const images = document.querySelector('.slider-carousel').children;
const totalImages = images.length;
let currentIndex = 0;


// Event Listeners to previous and next buttons
previous.addEventListener('click', () => {
previousImage()
})

next.addEventListener('click', () => {
nextImage();
})


// Function to go to next Image
function nextImage(){

images[currentIndex].classList.remove('main');
if(currentIndex == totalImages-1){
currentIndex = 0;
}
else{
currentIndex++;
}

images[currentIndex].classList.add('main');

}

// Function to go to previous Image
function previousImage(){

images[currentIndex].classList.remove('main');
if(currentIndex == 0){
currentIndex = totalImages-1;
}
else{
currentIndex--;
}

images[currentIndex].classList.add('main');

}

</script>

</body>
</html>
Выход

Поздравляем, вы создали CSS-слайдер, используя HTML, CSS и JavaScript.

Функция слайд-шоу

В настоящее время наш слайдер работает в ручном режиме. То есть изображение не меняется, пока пользователь не нажмет кнопку «Предыдущее» или «Следующее». Однако большинство доступных в интернете слайдеров работают иначе. Они используют эффект слайд-шоу, который позволяет автоматически менять кадры через заданное время.

Это можно сделать и в слайдере. Используя JavaScript, мы можем применить функцию `setInterval`, которая автоматически вызывает функцию `next` через заданное время. Это помогает слайдеру работать автоматически и изменять положение ползунка по истечении указанного времени.

<!DOCTYPE html>
<html>
<head>
<title>Slider in CSS</title>
<style>

body{
background-color: rgb(58, 58, 58);
margin-top: 100px;
}
.carousel-container {
width: 600px;
height: 400px;
position: relative;
margin: 0 auto;

}

.navigation-buttons .previous {
position: absolute;
z-index: 10;
font-size: 25px;
top: 40%;
left: 10px;
font-weight: 700;
}

.navigation-buttons .next {
right: 10px;
position: absolute;
font-size: 25px;
z-index: 10;
top: 40%;
}

.navigation-buttons .nav-btn {
background: rgba(255, 255, 255, 0.55);
cursor: pointer;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}

.navigation .nav-btn:hover {
background: white;
}

.slider-carousel {
margin-top: 20px;
transition: all 0.3s ease;

}
.slider-carousel img {
width: 100%;
transition: all 0.3s ease;
border:8px solid white;
}

.images {
position: absolute;
display: none;
}

.main {
display: block;
}

.image-text {
position: absolute;
bottom: 0;
width: 103%;
display: flex;
font-size: 20px;
justify-content: center;
align-items: center;
color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0.3);
height: 35px;
}

</style>
</head>
<body>

<div id="parent-container">

<div class="navigation-buttons">
<div class="previous nav-btn"><</div>
<div class="next nav-btn">></div>
</div>

<div class="slider-carousel">
<div class="images main">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg" alt="flower 1" />
<div class="image-text">Image 1</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg" alt="flower 2" />
<div class="image-text">Image 2</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="flower 3" />
<div class="image-text">Image 3</div>
</div>
</div>

</div>

<script>

const previous = document.querySelector('.previous');
const next = document.querySelector('.next');
const images = document.querySelector('.slider-carousel').children;
const totalImages = images.length;
let currentIndex = 0;


// Event Listeners to previous and next buttons
previous.addEventListener('click', () => {
previousImage()
})

next.addEventListener('click', () => {
nextImage();
})

setInterval(()=>{
nextImage();
},1000);

// Function to go to next Image
function nextImage(){

images[currentIndex].classList.remove('main');
if(currentIndex == totalImages-1){
currentIndex = 0;
}
else{
currentIndex++;
}

images[currentIndex].classList.add('main');

}

// Function to go to previous Image
function previousImage(){

images[currentIndex].classList.remove('main');
if(currentIndex == 0){
currentIndex = totalImages-1;
}
else{
currentIndex--;
}

images[currentIndex].classList.add('main');

}

</script>

</body>
</html>
Выход

Навигационные точки

Помимо использования заголовка или текстового изображения в слайдере, вы также можете использовать навигационные точки. Навигационные точки работают аналогично тексту или заголовку. Они указывают пользователю, на каком фрейме он находится в данный момент. Навигационные точки используются во многих современных слайдерах, потому что они удобны и просты в создании. Чаще всего навигационные точки представляют собой переключатели (радиокнопки).

Преимущество использования точек навигации заключается в том, что это позволяет пользователю без труда переходить к каждому кадру слайдера. В отличие от традиционного слайдера, где пользователю приходится просматривать каждое изображение по отдельности, точки навигации позволяют пользователю переходить к каждому кадру или изображению, щелкая по соответствующей точке навигации.

Основной принцип работы навигационных точек аналогичен принципу скольжения изображений. Текущее изображение имеет соответствующую кнопку навигации с классом active. После смены изображения класс active перемещается или добавляется к текущему изображению и текущей навигационной точке.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}

body {font-family: Verdana, sans-serif; margin:0}

.images {display: none}

img {
vertical-align: middle;
width:100%;
}

/* Slideshow container */
.carousel-container {
max-width: 1000px;
position: relative;
margin: auto;
}

/* Next & previous buttons */
.previous, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}

/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit seethrough */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}


/* The dots/bullets/indicators */
.navigation-dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .navigation-dot:hover {
background-color: #717171;
}
</style>
</head>
<body>
<div class="carousel-container">
<div class="images fade">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg">
</div>
<div class="images fade">
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg">
</div>
<div class="images fade">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg">
</div>

<!-- Previous and Next Buttons -->
<a class="previous" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>

<!-- Navigation Dots-->
<div style="text-align:center">
<span class="navigation-dot" onclick="currentSlide(1)"></span>
<span class="navigation-dot" onclick="currentSlide(2)"></span>
<span class="navigation-dot" onclick="currentSlide(3)"></span>
</div>
<script>
var currentIndex = 1;

//Show current image
showSlides(currentIndex);

//Function to move Next
function plusSlides(n) {
showSlides(currentIndex += n);
}

//Function to move back
function currentSlide(n) {
showSlides(currentIndex = n);
}


//Initiate moving of slides
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("images");
var dots = document.getElementsByClassName("navigation-dot");
if (n > slides.length) {currentIndex = 1}
if (n < 1) {currentIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[currentIndex-1].style.display = "block";
dots[currentIndex-1].className += " active";
}
</script>
</body>
</html>
Выход

Альтернативный пример

Слайдеры, созданные с использованием JavaScript, работают корректно, если JavaScript включен в браузере. Как только пользователь отключит JavaScript, слайдер перестанет работать, поскольку для его функционирования используется JavaScript.

Для создания слайдера не обязательно использовать JavaScript. Вы можете создать слайдер, используя только HTML и CSS. Вам нужно лишь понять, как он работает, когда пользователь нажимает кнопку «Предыдущая» или «Следующая». Слайдер, созданный с помощью HTML и CSS, использует меньше памяти браузера и будет работать, даже если JavaScript отключен в браузере.

Вы можете использовать их атрибуты и свойства для создания активного класса. Для кнопки навигации вы можете создать активный класс, который будет срабатывать при нажатии на кнопку или при наведении курсора. Это работает аналогично JavaScript, однако вместо манипуляций с DOM мы будем использовать функции CSS, такие как `target` и т. д., для достижения этой цели.

Мы создали для вас пример слайдера с использованием HTML и CSS. Мы использовали псевдоактивные классы, такие как `check`, чтобы определить, на какой навигационной панели пользователь недавно кликнул. Затем мы показываем пользователю соответствующее изображение. Для каждого изображения мы задали поля и отступы, поскольку мы не скрываем изображения.

<!DOCTYPE html>
<html>

<head>
<title> Slider using HTML and CSS </title>
<style>

img{
height:100%;
width:100%;
}

#frame {
margin: 0 auto;
height:400px;
width: 600px;
max-width: 100%;
}

#frame input[type=radio] {

display: none;
}

#frame label {
cursor: pointer;
text-decoration: none;
}

#slides {
padding: 10px;
background: #00F;
position: relative;
z-index: 1;
}

#overflow {
width: 100%;
overflow: hidden;
}

#frame1:checked~#slides .inner {
margin-left: 0;
}

#frame2:checked~#slides .inner {
margin-left: -100%;
}

#frame3:checked~#slides .inner {
margin-left: -200%;
}

#slides .inner {
transition: margin-left 800ms
cubic-bezier(0.770, 0.000, 0.175, 1.000);
width: 400%;
line-height: 0;
height: 300px;
}

#slides .frame {
width: 25%;
float: left;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: black;
}

#controls {
margin: -180px 0 0 0;
width: 100%;
height: 50px;
z-index: 3;
position: relative;
}

#controls label {
transition: opacity 0.2s ease-out;
display: none;
width: 50px;
height: 50px;
opacity: .4;
}

#controls label:hover {
opacity: 1;
}

/* active class for images*/
#frame1:checked~#controls label:nth-child(2),
#frame2:checked~#controls label:nth-child(3),
#frame3:checked~#controls label:nth-child(1){
float: right;
margin: 0 -50px 0 0;
display: block;
}

/* active class for navigation button*/
#frame1:checked~#controls label:nth-last-child(2),
#frame2:checked~#controls label:nth-last-child(3),
#frame3:checked~#controls label:nth-last-child(1){
float: left;
margin: 0 0 0 -50px;
display: block;
}

#bullets {
margin: 150px 0 0;
text-align: center;
}

#bullets label {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 100%;
background: #ccc;
margin: 0 10px;
}

#frame1:checked~#bullets label:nth-child(1),
#frame2:checked~#bullets label:nth-child(2),
#frame3:checked~#bullets label:nth-child(3){
background: #444;
}

</style>
</head>

<body>
<div id="frame">
<input type="radio" name="frame" id="frame1" checked />
<input type="radio" name="frame" id="frame2" />
<input type="radio" name="frame" id="frame3" />
<div id="slides">
<div id="overflow">
<div class="inner">
<div class="frame">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg">
</div>
<div class="frame">
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg">
</div>
<div class="frame">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg">
</div>
</div>
</div>
</div>
<div id="controls">
<label for="frame1"></label>
<label for="frame2"></label>
<label for="frame3"></label>
</div>
<div id="bullets">
<label for="frame1"></label>
<label for="frame2"></label>
<label for="frame3"></label>
</div>
</div>
</body>

</html>
Выход

Результат

  • Слайдеры представляют собой последовательность кадров, каждый из которых можно прокручивать по очереди.
  • Сегодня они используются на многих веб-сайтах для отображения комментариев или отзывов.
  • Для создания слайдера пользователю необходимо знать такие понятия, как HTML-теги, концепции CSS, такие как наложение элементов, позиционирование и т. д., а также основы JavaScript, такие как переменные и манипулирование DOM.
  • Слайдеры работают за счет наличия активного класса, который отображается постоянно. Остальные фреймы отображаются выключенными. Когда пользователь наводит курсор на кнопку или точку, мы изменяем элемент, имеющий активный класс, с помощью манипуляций с DOM.
  • Если у пользователя в браузере отключен JavaScript, слайдер работать не будет.
  • Для создания слайдера можно использовать только HTML и CSS. Это экономит память браузера и вычислительное время. Также это работает в любом браузере, поддерживающем HTML и CSS.
В этой статье:
,,,,
Автор поста:
Следовать
Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Предыдущая статья
Следующая статья
Вам также может понравиться