Как сделать слайдер

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

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

В примере есть несколько вариантов реализации этого простого слайдера, а мы сейчас разберем как им пользоваться.

Для этого все файлы закачайте в Вашу директорию, где хранится Ваш сайт. После этого в index файле Вашего сайта перед закрывающим тегом </head> вставляем следующий код:

Код слайдера:

<div class="item"><img src="https://dahock.moy.su/Scroll-Up/77840.jpg" /></div>
<a class="previous" onclick="previousSlide()">❮</a> <a class="next" onclick="nextSlide()">❯</a></div>
<style type="text/css">/* Слайдер */
.slider{
max-width: 90%;
position: relative;
margin: auto;
height: 400px;
}
/* Картинка масштабируется по отношению к родительскому элементу */
.slider .item img {
object-fit: cover;
width: 100%;
height: 400px;
}
/* Кнопки вперед и назад */
.slider .previous, .slider .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 16px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.slider .next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* При наведении на кнопки добавляем фон кнопок */
.slider .previous:hover,
.slider .next:hover {
background-color: rgba(0, 0, 0, 0.2);
}
/* Анимация слайдов */
.slider .item {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {
opacity: 0.4
}
to {
opacity: 1
}
}
</style>
<script>
/* Устанавливаем индекс слайда по умолчанию */
let slideIndex = 1;
showSlides(slideIndex);

/* Увеличиваем индекс на 1 — показываем следующий слайд*/
function nextSlide() {
showSlides(slideIndex += 1);
}

/* Уменьшает индекс на 1 — показываем предыдущий слайд*/
function previousSlide() {
showSlides(slideIndex -= 1);
}

/* Устанавливаем текущий слайд */
function currentSlide(n) {
showSlides(slideIndex = n);
}

/* Функция перелистывания */
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("item");

if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}

/* Проходим по каждому слайду в цикле for */
for (let slide of slides) {
slide.style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
</script>

Особое внимание уделите второй строчке нашего кода, так как именно сюда мы вставляем различные вариации нашего слайдера. Для этого внимательно смотрите демо, там есть все коды, которые надо вставить вместо этого, чтобы изменить эффекты смены картинок слайдера.

Вот собственно и весь слайдер. Все файлы подключены, все должно работать. Для персонализации Вашего слайдера правьте default.css, где хранятся все стили нашего слайдера, а также очень внимательно отнеситесь к путям на Ваши картинки, чтобы все работало как нужно.

★ Cохраненные страницы:

Как сделать слайдер

Комментарии:

Dahock Portal

Главное:

Развлечение:

Проекты:

Мультимедиа:

Интерактив:

Главное:

Dahock.su:

Услуги: