Как сделать слайдер на сайте html css js автоматический
Перейти к содержимому

Как сделать слайдер на сайте html css js автоматический

  • автор:

Обучение веб-разработке на практике: пишем слайдер на JavaScript

Аватарка пользователя Марина Александровна

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

Обучение веб-разработке на практике эффективнее голой теории: всё наглядно, а полученные в ходе разработки решения можно использовать в будущих проектах. Именно поэтому мы совместно с онлайн-школой GeekBrains подготовили туториал по созданию простого слайдера изображений с объяснением каждого шага. Вот так будет выглядеть финальная версия:

Примечание Данная статья — лишь небольшое погружение в мир фронтенд-разработки, ведь современный веб не ограничивается знанием HTML/CSS/JavaScript. Чтобы стать востребованным веб-разработчиком, необходимо осваивать дополнительные библиотеки и фреймворки, которые часто строго разделены между фронтендом и бэкендом.

Что понадобится?

Можно сразу скачать IDE вроде WebStorm, но при обучении веб-разработке с нуля можно начать и в онлайн-редакторе. Мы будем использовать CodePen — популярный онлайн-редактор для веб-разработчиков с мгновенным отображением результата. Но если вы уже начали работу в какой-либо другой среде и считаете, что она намного удобнее, просто убедитесь, что есть поддержка HTML/CSS/JavaScript.

Пишем код

На различных курсах веб-разработки знакомство с фронтендом начинается с описания основных технологий, а именно:

  • HTML — язык гипертекстовой разметки, на котором пишется «скелет» сайта. Если провести аналогию с домом, то это каркас. Грубо говоря, вы строите разметку, на которую после будет ложиться оформление.
  • CSS — каскадные таблицы стилей или то самое оформление. Вернёмся к примеру с домом: после постройки его нужно облицевать, покрасить, сделать презентабельным, и именно CSS описывает внешний вид сайта.
  • JavaScript — язык программирования, который обеспечивает функциональность. Вы можете взаимодействовать с вещами в вашем доме — включать и выключать свет, бытовую технику, воду и многое другое. Вы точно так же можете взаимодействовать с сайтом, нажимая кнопки, наводя курсор на изображения и заполняя формы. JavaScript обрабатывает все эти взаимодействия, и, как язык сценариев, он может предоставлять правила и логику для определения того, что должно произойти дальше.

HTML

Обучение веб-разработке стоит начать с HTML, так как это каркас сайта. Каждый HTML-документ имеет стандартную структуру:

 
   не отображается на странице, помогает в работе с данными и хранит информацию для поисковых систем и браузеров: -->  Устанавливает заголовок для окна веб-страницы   

Текст

ИзображениеСсылка

Но в нашем примере прописывать структуру всей страницы не нужно, ведь мы работаем с отдельным компонентом, который потом будет размещаться между тегами . Здесь всё просто: у нас есть основной блок (тег ), который является родительским и содержит ещё три блока с разными картинками — будущими слайдами:

Обратите внимание, что у каждого тега есть свой класс. Именно по этим классам будет применяться оформление CSS. В тегах мы указываем ссылки на те изображения, которые будут показываться. В атрибуте onclick мы обращаемся к конкретной функции JavaScript, привязывая к кнопке действие по клику.

CSS

В каскадных стилях задаём ширину, высоту, позиционирование, цвет и анимацию. В нашем случае мы работаем отдельно с контейнером слайдера, отдельно с контейнерами картинок, которые прописаны как item, кнопками, добавлением к ним фона и анимацией слайдов:

/* Слайдер: */ .slider < max-width: 90%; /* Положение элемента устанавливается относительно его исходной позиции: */ position: relative; /* Центрируем по горизонтали: */ margin: auto; height: 300px; >/* Картинка масштабируется по отношению к родительскому элементу: */ .slider .item img < /* Элемент меняет размер так, чтобы заполнить блок и сохранить пропорции: */ object-fit: cover; width: 100%; height: 300px; >/* Кнопки назад и вперёд: */ .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 >> 

Со всеми значениями можно поэкспериментировать в редакторе. Если есть сомнения по поводу какого-то из атрибутов, достаточно его удалить и посмотреть, что изменилось.

JavaScript

Веб-разработчик, обучение которого ограничивается HTML и CSS, — это скорее веб-дизайнер. Мы же переходим к главному языку фронтенда, который способен вдохнуть жизнь в визуальное решение:

/* Устанавливаем стартовый индекс слайда по умолчанию: */ 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) < /* Обращаемся к элементам с названием класса "item", то есть к картинкам: */ 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"; > 

Но не стоит забывать, что не JavaScript единым: современные библиотеки и фреймворки способны упростить разработку и улучшить функциональность веб-компонента. Например, Bootstrap позволяет верстать сайты в разы быстрее, и даже начинающий разработчик может создать рабочий макет с использованием данного фреймворка. А ещё можно написать слайдер на чистом HTML/CSS, чтобы потренировать навыки в вёрстке и каскадных таблицах стилей.

Приведённый в уроке пример довольно прост и призван показать возможности стандартного взаимодействия HTML, CSS и JavaScript.

Готовый слайдер изображений

В финальной версии слайдера использовано несколько картинок, две кнопки с изменением фона при наведении курсора и плавная анимация перехода. Как видно из нашего примера, обучение веб-разработке может базироваться на практике: это не только пробуждает интерес, но и позволяет экспериментировать, улучшать, изменять функциональность компонентов на своё усмотрение, параллельно пополняя багаж знаний и навыков.

Теперь вы можете попробовать другие способы реализации, перейти к использованию дополнительных инструментов, таких как Bootstrap:

Автоматический и ручной слайдер HTML + CSS

Автоматический и ручной слайдер HTML + CSS

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

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

Красивый слайдер на CSS для сайта

Скрипты

Шаблоны

Дизайн

Услуги

body <
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
height: 100vh;
background: #e3f9f6;
>

.karusel_snimka <
border-radius: 5px;
overflow: hidden;
width: 712px;
height: 364px;
border: 7px solid white;
box-shadow: 0 5px 18px rgba(0, 0, 0, 0.6);
>

.karusel_shoumev <
width: 500%;
height: 364px;
display: flex;
>

.karusel_shoumev input <
display: none;
>

.sekus <
width: 20%;
transition: 2s;
>

.sekus img <
width: 712px;
height: 364px;
>

.rukovodstvo_navigats <
position: absolute;
display: flex;
justify-content: center;
width: 712px;
margin-top: -40px;
>

.manual-btn <
border-radius: 8px;
cursor: pointer;
transition: 1s;
border: 2px solid #459ac1;
padding: 5px;
width: 42px;
box-shadow: 1px 1px 5px 0px rgb(70 67 67 / 63%), 0px 0px 3px 0px rgb(40 37 37 / 60%);
>

.manual-btn:not(:last-child) <
margin-right: 40px;
>

.manual-btn:hover <
background: #dd7a15;
>

#radio1:checked ~ .first <
margin-left: 0;
>

#radio2:checked ~ .first <
margin-left: -20%;
>

#radio3:checked ~ .first <
margin-left: -40%;
>

#radio4:checked ~ .first <
margin-left: -60%;
>

/*css for automatic navigation*/

.navigation-auto <
position: absolute;
justify-content: center;
margin-top: 460px;
display: flex;
width: 800px;
>

.automobile-sliv div <
border-radius: 8px;
transition: 1s;
border: 2px solid #f3b03a;
padding: 5px;
width: 30px;
>

.automobile-sliv div:not(:last-child) <
margin-right: 40px;
>

#radio1:checked ~ .automobile-sliv .auto-btn1 <
background: #d8f33a;
>

#radio2:checked ~ .automobile-sliv .auto-btn2

#radio3:checked ~ .automobile-sliv .auto-btn3 <
background: #d8f33a;
>

#radio4:checked ~ .automobile-sliv .auto-btn4 <
background: #d8f33a;
>

var counter = 1;
setInterval(function() <
document.getElementById('radio' + counter).checked = true;
counter++;
if(counter > 4) <
counter = 1;
>
>, 5000);

На этом установка завершена!

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

Автоматическое переключение слайдов JS

Всем привет! Делаю слайдер на чистом JS, нужно чтобы слайды переключались сами в определенное время. Можно ли как-то установить, чтобы после ручного переключения слайда пользователем таймер обнулялся и не случалось такого, чтобы сразу после клика переключалась еще одна страница слайда сразу же? HTML + CSS + JS: https://jsfiddle.net/k72nth41/ Сам JS:

let slideIndex = 1; showSlides(slideIndex); let prev = document.getElementById ('prev'); let next = document.getElementById ('next'); next.addEventListener ("click", function () < showSlides(slideIndex += 1); >); prev.addEventListener ("click", function () < showSlides(slideIndex -= 1); >); function currentSlide(n) < showSlides(slideIndex = n); >function showSlides(n) < let slides = document.getElementsByClassName("myslide"); if (n >slides.length) < slideIndex = 1; >if (n < 1) < slideIndex = slides.length; >for (let slide of slides) < slide.style.display = "none"; >slides[slideIndex - 1].style.display = "flex"; > let timer = setInterval(function()< slideIndex++; showSlides(slideIndex); >,5000); 
  • javascript
  • веб-программирование

Отслеживать

darya lewy

задан 26 фев 2021 в 12:31

darya lewy darya lewy

163 1 1 серебряный знак 9 9 бронзовых знаков

Хорошо бы, чтоб Вы добавили в вопрос стили и разметку - чтобы можно было воспроизвести пример

26 фев 2021 в 12:40

@humster_spb спасибо за правку, код добавила.

26 фев 2021 в 12:54

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Вот такое решение у меня получилось. Я использовал clearInterval() для прерывания работы интервала. После "очистки" интервал вновь создастся и будет выполнять перелистывание каждые 5 секунд. (Я добавил таймер и покрасил картинки в разные цвета, чтобы было более понятно что вообще происходит.)

let slideIndex = 1; showSlides(slideIndex); let prev = document.getElementById ('prev'); let next = document.getElementById ('next'); next.addEventListener ("click", function () < showSlides(slideIndex += 1); makeTimer();//Пересоздаем интервал если производится нажатие >); prev.addEventListener ("click", function () < showSlides(slideIndex -= 1); makeTimer();//Пересоздаем интервал если производится нажатие >); function currentSlide(n) < showSlides(slideIndex = n); >function showSlides(n) < let slides = document.getElementsByClassName("myslide"); if (n >slides.length) < slideIndex = 1; >if (n < 1) < slideIndex = slides.length; >for (let slide of slides) < slide.style.display = "none"; >slides[slideIndex - 1].style.display = "flex"; > var timer = 0; makeTimer(); //Создаем интервал function makeTimer()< clearInterval(timer) //Очистим интервал, это позволит прервать его работу и отменить перелистывание timer = setInterval(function()< slideIndex++; showSlides(slideIndex); >,5000); > //Таймер, (чтобы было удобнее считать время) можно удалить var seconds = 5; setInterval(()=> < seconds = seconds - 1; if(!seconds)document.getElementById("timeVisual").innerHTML = seconds >,1000)
.slider_wrapper < display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; >.myslide < display: none; flex-wrap: nowrap; justify-content: space-between; align-items: center; >.myslide img < margin-right: 15px; margin-left: 15px; >.slider_wrapper a < cursor: pointer; >.pack_1 < background-color: red; >.pack_2 < background-color: green; >.pack_3 < background-color: blue; >.pack_4
prev

1
2
3

8
sl
sl

sl
sl
sl

sl
sl
sl

next

Слайдеры на чистом CSS + бонусный слайдер

Слайдер на CSS

Если вы занимаетесь web-разработкой и есть желание сделать это профессией или перейти на следующий уровень, то посмотрите на эту школу и курс «Front-end разработчик» от Нетологии, и, в качестве альтернативы похожий курс от Skillbox «Front-end разработчик«. Особенное внимание уделите изучению преподавателей курса, от их зависит скорость вашего роста.

Как и в прошлых уроках, я рекомендую все примеры смотреть в браузере Chrome.

1. CSS3 слайдер изображений

Слайдер на CSS, который использует для навигации по слайдам радиокнопки. Эти радиокнопки находятся под слайдеров. Также помимо радиокнопок навигация осуществляется с помощью стрелок слева и справа. Чтобы следить за тем, какое изображение сейчас отображать — используются псевдоклассы :checked .

CSS3 слайдер изображений

2. CSS3 слайдер изображений с миниатюрами

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

CSS3 слайдер с миниатюрами

3. Галерея на CSS

А вот этот слайдер на CSS отлично подойдет для продающих страниц. Как правило, многие веб-разработчики при разработке лендингов (продающих страниц) размещают слайдер в самом начале, чтобы в первом экране (без прокрутки) посетитель сразу видел все выгоды, которые есть для него на этой странице. Помимо всего, этот слайдер является адаптивным, что также радует.

Галерея на CSS

4. Слайдер на CSS без ссылок

Сразу хочу заметить что этот слайдер не использует ссылок! По умолчанию кроме главного изображения (слайда) видны еще 2 слайда. Они расположены позади основного. Смена слайдов происходит в красивом режиме: сначала раздвигаются два слайда и по центру становится тот слайд, который затем станет главным. Затем слайд увеличивается и помещается впереди остальных.

Слайдер на CSS без ссылок

5. Адаптивный слайдер на CSS3

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

Адаптивный слайдер на CSS3

*** БОНУСНЫЙ СЛАЙДЕР ***

Кроме всех слайдеров, которые представлены выше, я хочу порадовать Вас еще одним. Этот слайдер отлично подойдет для создания галереи изображений. Словами не объяснишь то что он делает, поэтому лучше смотрите всё на видео:

Вывод

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

Пункты, которые были рассмотрены в статье:

Добавить комментарий

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