Как сделать простой слайдер на HTML и JavaScript
Вы сверстали сайт и сделали его красивым с помощью CSS. Осталось добавить интерактива, и можно добавлять проект в портфолио.
«Оживить» на сайте можно что угодно: меню, модальные окна, корзину, пагинацию… В этой статье мы разберём слайдер — посмотрим, как его сделать на чистом JavaScript. Слайдер пригодится для раздела с отзывами, фотографиями сотрудников, изображениями товаров или чего-нибудь ещё — всё зависит только от вашей фантазии и проекта.
☝ Мы покажем лишь один из возможных вариантов. Это не эталонное решение, да в разработке и не бывает единственно верного способа решить задачу. Но код точно работает, поэтому можете скопировать его в свой проект.
Пример простого слайдера на чистом JavaScript
See the Pen Untitled by Feizerr (@feizerr) on CodePen.
Что здесь происходит
- Мы ищем в HTML-разметке контейнер слайдера, кнопки и изображения. Записываем всё в переменные.
- Находим общее количество слайдов. Затем создаём переменную slideIndex и делаем её равной 0 — это индекс активного слайда
- Добавляем обработчики событий на кнопки, чтобы реагировать на клики пользователя.
- Когда пользователь нажимает на кнопку .prev-button , мы переключаемся на предыдущий слайд (если текущий слайд не первый) и обновляем отображение слайдера.
- Когда пользователь нажимает на кнопку .next-button , переключаемся на следующий слайд (если текущий слайд не последний) и обновляем отображение слайдера.
- Функция updateSlider() обновляет отображение слайдера, показывая только текущий слайд и скрывая остальные.
- При загрузке страницы мы вызываем updateSlider() , чтобы отобразить первый слайд и настроить слайдер для начала работы.
Этот код можно бесконечно менять и дорабатывать: настроить анимацию, удалить зацикливание или сделать слайдер адаптивным. Или можно использовать наш пример, чтобы понять, как работает слайдер, а затем написать свой код — ещё проще и чище.
Популярные библиотеки для слайдеров
Если слайдер нужен здесь и сейчас, но писать с нуля не хочется, а пример выше не подходит — используйте библиотеки.
Slick
Гибкая библиотека для адаптивных слайдеров. Здесь можно настроить показ одного или нескольких слайдов, включить автоматическое переключение и задать скорость смены слайдов, подключить ленивую загрузку, настроить стрелки и пагинацию.
Swiper
«Самый современный мобильный сенсорный слайдер» — так разработчики говорят о своей библиотеке. В ней есть плавные переходы, 3D-анимации, автоматическое переключение слайдов, пагинация и навигация. А ещё здесь гибкие макеты: можно размещать слайды в несколько строк, добавлять несколько слайдов в столбец, управлять расстояниями между слайдами.
Owl Carousel
Простая в использовании библиотека, подойдёт даже новичкам. Она поддерживает различные переходы и анимации, есть настройки для автоматического переключения слайдов и пагинация.
Glide.js
Легковесная и быстрая библиотека: со всеми функциями она весит всего 28 КБ (8 КБ в сжатом виде). При этом подключать всё необязательно — лишние модули можно удалить, и тогда она станет ещё легче.
Параметров много. Можно настроить автоматическую прокрутку, добавить анимации, указать минимальное расстояние для смены слайда, включить зацикливание… Почти всё то же, что и в других библиотеках.
Какую из библиотек использовать — решать вам. У каждой понятная документация с примерами кода, вы точно разберётесь, как создать слайдер. И у всех гибкие настройки. Поэтому попробуйте поработать с каждой библиотекой или просто посмотрите примеры и выберите ту, что больше нравится и подходит вам.
�� Чтобы делать слайдеры любой сложности и вообще что угодно в вебе, приходите на профессию «JavaScript-разработчик».
Материалы по теме
- Стоит ли делать слайдеры на CSS
- 9 книг по JavaScript для начинающих
- Как работают колбэки в JavaScript
- Как составлять регулярные выражения
- Как сделать список задач с drag & drop
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Объект URL в JavaScript: полный разбор
Объект URL в JavaScript представляет URL-адрес и предоставляет удобные методы для работы с ним. Он позволяет анализировать, конструировать и декодировать URL-адреса.
Создать объект URL можно двумя способами:
Конструктор URL() — самый распространённый способ, в котором вы передаёте любой URL в виде строки в качестве аргумента.
const url = new URL("https://www.example.com/path?query=123#hash"); Использование window.location — это глобальный объект в браузерах, который содержит информацию о текущем URL.
const currentUrl = new URL(window.location.href); - 23 января 2024
Генерация QR-кодов на JS в 4 шага. Node.js + qrcode
Сегодня сделаем простой REST API на Node.js и Express, который будет генерировать QR-коды для любой ссылки. Если у вас ещё не установлены Node.js и npm , установите их с официального сайта.
- 22 ноября 2023
ChatGPT не справляется
Притворитесь нейросетью и решите 101 задачку по JavaScript как можно быстрее.
- 2 ноября 2023
Знакомство с JavaScript
Теперь, когда вы знаете, как создать структуру веб-страницы с помощью HTML и оформить ее стилями с помощью CSS, пришло время оживить её с помощью JavaScript (JS). JavaScript — это мощный язык программирования, который используется для создания интерактивных и динамических веб-сайтов.
Вы можете добавить JavaScript в ваш HTML-документ двумя способами:
Встроенный JavaScript: непосредственно в HTML-документ, в тегах :
Внешний JavaScript: подключение внешнего .js файла к HTML-документу:
- 1 ноября 2023
Событие onclick в JS на примерах
Интерактивность — ключевой компонент любого современного сайта. И одним из наиболее часто используемых событий для создания интерактивности является событие onclick . В этой статье мы подробно разберёмся, что такое событие onclick , как его использовать и приведем примеры применения.
Событие onclick — это событие JavaScript, которое активируется, когда пользователь кликает на определенный элемент страницы. Это может быть кнопка, ссылка, изображение или любой другой элемент, на который можно нажать.
- 30 октября 2023
Как перевернуть сайт. Самая короткая инструкция
Не представляем, зачем это может понадобиться, но не могли пройти мимо.
Никакой магии. Мы вызываем JavaScript-функцию rotateBody() , которая применяет свойство transform с значением rotate(180deg) к элементу . Когда вы нажмете на кнопку «Перевернуть», всё, что находится внутри будет повернуто на 180 градусов (то есть, встанет вниз головой)
function rotateBody() < document.body.style.transform = 'rotate(180deg)'; > Но такой код повернёт страницу только один раз. Если нужно, чтобы она возвращалась обратно при втором клике, усложним код:
let isRotated = false; function rotateBody() < if (isRotated) < document.body.style.transform = 'rotate(0deg)'; document.body.style.direction = "ltr"; >else < document.body.style.transform = 'rotate(180deg)'; document.body.style.direction = "rtl"; >isRotated = !isRotated; > Надеемся, вы прочитали это описание до того, как нажать на кнопку.
- 25 октября 2023
Как узнать геолокацию: Geolocation API
Geolocation API позволяет сайтам запрашивать, а пользователям предоставлять свое местоположение веб-приложениям. Геолокация может использоваться для выбора города в интернет-магазине, отображения пользователя на карте или навигации в ближайший гипермаркет.
Основной метод Geolocation API — getCurrentPosition() , но есть и другие методы и свойства, которые могут пригодиться.
- 16 октября 2023
Что такое localStorage и как им пользоваться
localStorage — это место в браузере пользователя, в котором сайты могут сохранять разные данные. Это как ящик для хранения вещей, которые не исчезнут, даже если вы выключите компьютер или закроете браузер.
До localStorage разработчики часто использовали cookies, но они были не очень удобны: мало места и постоянная передача данных туда-сюда. LocalStorage появился, чтобы сделать процесс более простым и эффективным.
- 12 октября 2023
Случайное число из диапазона
Допустим, вам зачем-то нужно целое случайное число от min до max . Вот сниппет, который поможет:
function getRandomInRange(min, max)
- Math.random () генерирует случайное число между 0 и 1. Например, нам выпало число 0.54 .
- (max — min + 1): определяет количество возможных значений в заданном диапазоне. 10 — 0 + 1 = 11 . Это значит, что у нас есть 11 возможных значений (0, 1, 2, . 10).
- Math.random () * (max — min + 1): умножает случайное число на количество возможных значений: 0.54 * 11 = 5.94 .
- Math.floor (): округляет число вниз до ближайшего целого. Так, Math.floor(5.94) = 5 .
- . + min: смещает диапазон так, чтобы минимальное значение соответствовало min . Но в нашем примере, так как min = 0 , это не изменит результат. Пример: 5 + 0 = 5 .
- Итак, в нашем примере получилось случайное число 5 из диапазона от 0 до 10.
Чтобы протестировать, запустите:
console.log(getRandomInRange(1, 10)); // Тест - 7 сентября 2023
В чём разница между var и let
Если вы недавно пишете на JavaScript, то наверняка задавались вопросом, чем отличаются var и let , и что выбрать в каждом случае. Объясняем.
var и let — это просто два способа объявить переменную. Вот так:
var x = 10; let y = 20; Переменная, объявленная через var , доступна только внутри «своей» функции, или глобально, если она была объявлена вне функции.
function myFunction() < var z = 30; console.log(z); // 30 >myFunction(); console.log(z); // ReferenceError Это может создавать неожиданные ситуации. Допустим, вы создаёте цикл в функции и хотите, чтобы переменная i осталась в этой функции. Если вы используете var , эта переменная «утечёт» за пределы цикла и будет доступна во всей функции.
Переменные, объявленные с помощью let доступны только в пределах блока кода, в котором они были объявлены.
if (true) < let a = 40; console.log(a); // 40 >console.log(a); // ReferenceError В JavaScript блок кода — это участок кода, заключённый в фигурные скобки <> . Это может быть цикл, код в условном операторе или что-нибудь ещё.
if (true) < let blockScoped = "Я виден только здесь"; console.log(blockScoped); // "Я виден только здесь" >// здесь переменная blockScoped недоступна console.log(blockScoped); // ReferenceError Если переменная j объявлена в цикле с let , она останется только в этом цикле, и попытка обратиться к ней за его пределами вызовет ошибку.
- 30 августа 2023
Как сделать слайдер на сайте html css
Один из самых простых способов для создания слайдера на html и css — это использование стандартного CSS свойства scroll-snap-type в сочетании с scroll-snap-align .
Для этого нужно создать контейнер, в котором будут располагаться слайды, и задать ему свойство scroll-snap-type: x mandatory; , чтобы горизонтальный скролл происходил с определенным шагом. Затем для каждого слайда нужно задать свойство scroll-snap-align: start; , чтобы они выравнивались по левому краю контейнера.
06 апреля 2023
.container display: flex; overflow-x: scroll; scroll-snap-type: x mandatory; width: 300px; -webkit-overflow-scrolling: touch; /* для плавной прокрутки на мобильных устройствах */ > Правило scroll-snap-type: x mandatory указывает, что прокрутка должна происходить только по горизонтали, а элементы должны привязываться к точкам привязки, заданным в этом направлении. Правило overflow-x: scroll задаёт горизонтальную прокрутку.
Далее, необходимо задать точки привязки для элементов слайдера, для этого используется свойство scroll-snap-align :
.slide flex: none; scroll-snap-align: start; width: 300px; text-align: center; > Правило scroll-snap-align: start указывает, что элемент должен привязываться к началу контейнера при прокрутке.
class="container"> class="slide">Первый слайд class="slide">Второй слайд class="slide">Третий слайд Таким образом, при прокрутке контейнера элементы будут переключаться по одному, в соответствии с заданными точками привязки.
Подборка слайдеров для сайта на чистом CSS
ВСЕ СЛАЙДЕРЫ В ПРИМЕРАХ РАБОТАЮТ БЕЗ СКРИПТОВ. Для установки любого слайдера на свой сайт нужно скопировать HTML разметку и CSS:
Пример 1: Маленький слайдер с автоматической прокруткой фото
Это самый простой слайдер без возможности самостоятельного скроллинга фотографий. Рекомендуемый размер изображений 500x300px.
HTML разметка
CSS оформление
.container_slider_css{margin:50px auto;width:500px;height:300px;overflow:hidden;position:relative} .photo_slider_css{position:absolute;animation:round 16s infinite;opacity:0;width:100%} @keyframes round { 25%{opacity:1} 40%{opacity:0} } img:nth-child(1){animation-delay:12s} img:nth-child(2){animation-delay:8s} img:nth-child(3){animation-delay:4s} img:nth-child(4){animation-delay:0} @media(min-width:0px) and (max-width:320px) { .container_slider_css{width:80%;height:190px} } @media(min-width:321px) and (max-width:480px) { .container_slider_css{width:80%;height:190px} }
Пример 2: Слайдер, стилизованный под рамку картины
Рекомендуемый размер изображений 400x300px. Слайдер отображается ровно по центру страницы. Адаптива под мобильные устрайства — нет.
Если вы новичок в веб, то корректно установить данный слайдер себе на сайт будет проблематично из-за абсолютного позиционирования. Используются тени (box-shadow). Есть возможность самостоятельно скроллить фото.
Radio кнопки для прокрутки изображений появляются при наведении мышки.
HTML разметка
CSS оформление
.slider_picture{background-color:#fff;box-shadow:inset 0 0 2px hsla(0,0%,0%,.2),0 3px 1px hsla(0,0%,100%,.75),0 -1px 1px 2px hsla(0,0%,0%,.1);height:18.75em;left:50%;margin:-9.875em -13em;padding:.5em;position:absolute;top:50%;width:25em} .slider_picture:before{background-color:#22130c;bottom:-2.5em;box-shadow:inset 0 1px 1px 1px hsla(0,0%,100%,.2),inset 0 -2px 1px hsla(0,0%,0%,.4),0 5px 50px hsla(0,0%,0%,.25),0 20px 20px -15px hsla(0,0%,0%,.2),0 30px 20px -15px hsla(0,0%,0%,.15),0 40px 20px -15px hsla(0,0%,0%,.1);content:'';left:-2.5em;position:absolute;right:-2.5em;top:-2.5em;z-index:-1} .slider_picture:after{background-color:#fff5e5;bottom:-1.5em;box-shadow:0 2px 1px hsla(0,0%,100%,.2),0 -1px 1px 1px hsla(0,0%,0%,.4),inset 0 2px 3px 1px hsla(0,0%,0%,.2),inset 0 4px 3px 1px hsla(0,0%,0%,.2),inset 0 6px 3px 1px hsla(0,0%,0%,.1);content:'';left:-1.5em;position:absolute;right:-1.5em;top:-1.5em;z-index:-1} .slider_picture li{box-shadow:0 -1px 0 2px hsla(0,0%,0%,.03);list-style:none;position:absolute} .slider_picture input{display:none} .slider_picture label{background-color:#111;background-image:linear-gradient(transparent,hsla(0,0%,0%,.25));border:.2em solid transparent;bottom:.5em;border-radius:100%;cursor:pointer;display:block;height:.5em;left:24em;opacity:0;position:absolute;transition:.25s;width:.5em;visibility:hidden;z-index:10} .slider_picture label:after{border-radius:100%;bottom:-.2em;box-shadow:inset 0 0 0 .2em #111,inset 0 2px 2px #000,0 1px 1px hsla(0,0%,100%,.25);content:'';left:-.2em;position:absolute;right:-.2em;top:-.2em} .slider_picture:hover label{opacity:1;visibility:visible} .slider_picture input:checked + label{background-color:#fff} .slider_picture:hover li:nth-child(1) label{left:.5em} .slider_picture:hover li:nth-child(2) label{left:2em} .slider_picture:hover li:nth-child(3) label{left:3.5em} .slider_picture:hover li:nth-child(4) label{left:5em} .slider_picture img{height:18.75em;opacity:0;transition:.25s;width:25em;vertical-align:top;visibility:hidden} .slider_picture li input:checked ~ img{opacity:1;visibility:visible;z-index:10}
Пример 3: Обычный слайдер со стрелками — вперед и назад
Рекомендуемый размер изображений 960x640px. Слайдер полностью адаптирован под мобильные устройства. Есть возможность подписывать названия слайдов.
Для отображения стрелочек — вперед и назад, — используется стандартный набор иконок font-awesome. На мой взгляд этот слайдер самый оптимальный.
Как создать слайдер изображений или слайд-шоу
Слайдер изображений — это отличный способ отображения различных изображений веб-страницы. Красивые и интересные изображения могут привлечь много посетителей на вашу веб-страницу.
Обычно слайдеры изображений создаются с помощью JavaScript, но с версией CSS3 стало возможно создать слайдеры, используя только CSS3. В этой статье вы научитесь, как можно получить эффект слайд-шоу, сохраняя минимальный код CSS, а во второй части статьи вы узнаете, как создать слайдеры изображений с помощью JavaScript.
Создание слайдеров изображений используя только CSS3
Наверно вы уже видели слайдеры, созданные с помощью JavaScript, которые очень тяжело загружаются. Они замедляют работу веб-страницы, а также могут не работать, если пользователь отключил интерпретацию JavaScript в браузере. Одно из решений этой проблеме — это отказ от их использования, но как же можно создать слайдеры без использования JavaScript? Здесь вы найдете ответ.
Следуйте этим шагам:
- Выберите width и height для слайдов.
- Разместите все ваши слайды рядом друг с другом в одном изображении.
- Установите изображение как background для . Используйте свойство background-position для установления начального положения (0px). Определите, каким должно быть положение для каждого слайда. Должны быть использованы отрицательные числа.
- Установите продолжительность для всего слайд-шоу. Для этого используйте свойство animation-duration.
- Для @keyframes вам придется сделать некоторые вычисления. Используйте (pics * 2) / 100 как умножитель для каждого слайда. «100%» — это последний ключевой кадр (keyframe). Каждое изображение требует несколько ключевых кадров, чтобы приостановить («pause») слайд-шоу на изображении.
Давайте посмотрим как будет выглядеть код:
Пример
html> html> head> title>Слайдер изображений title> style> body < margin:10px auto; text-align:center; > .content < max-width:800px; text-align:left; margin:auto; > .simple-ss < width:800px; height:250px; background-color: #eeeeee; margin:auto; background-image:url("https://imgur.com/download/OtK7XDW"); animation-name: slide; animation-duration: 10s; animation-direction: normal; animation-timing-function: ease; animation-iteration-count: infinite; > @keyframes slide < 0% background-position:0 0;> 16.66% background-position:0 0;> 33.32% background-position:-800px 0;> 49.98% background-position:-800px 0;> 66.64% background-position:-1600px 0;> 83.30% background-position:-1600px 0;> 100% background-position:0 0;> > style> head> body> div class="simple-ss"> div> div class="content"> p>Слайд-шоу без использования Javascript. Он не имеет страниц, кнопок и т. д. p> div> body> html>Смотрите пример, где фоновые изображения действуют как слайдеры:
Пример
html> html> head> title>Слайдер изображений title> style> html, body < width: 100%; height: 100%; margin: 0; padding: 0; font-family: "Helvetica", sans-serif; > img < max-width: 100%; > .slider-container < height: 100%; width: 100%; position: relative; overflow: hidden; text-align: center; > .menu < position: absolute; left: 0; z-index: 900; width: 100%; bottom: 0; > .menu label < cursor: pointer; display: inline-block; width: 16px; height: 16px; background: #fff; border-radius: 50px; margin: 0 0.2em 1em; > .menu label:hover,.menu label:focus < background: #1c87c9; > .slide < width: 100%; height: 100%; position: absolute; top: 0; left: 100%; z-index: 10; padding: 8em 1em 0; background-size: cover; background-position: 50% 50%; transition: left 0s 0.75s; > [id^="slide"]:checked + .slide < left: 0; z-index: 100; transition: left 0.65s ease-out; > .slide-1 < background-image: url("/uploads/media/default/0001/03/5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg"); > .slide-2 < background-image: url("/uploads/media/default/0001/03/66cf5094908491e69d8187bcf934050a4800b37f.jpeg"); > .slide-3 < background-image: url("/uploads/media/default/0001/03/b87b29b6ca67b64b76651037dc16f5a46e73b42a.jpeg"); > style> head> body> div class="slider-container"> div class="menu"> label for="slide-dot-1"> label> label for="slide-dot-2"> label> label for="slide-dot-3"> label> div> input id="slide-dot-1" type="radio" name="slides" checked> div class="slide slide-1"> div> input id="slide-dot-2" type="radio" name="slides"> div class="slide slide-2"> div> input id="slide-dot-3" type="radio" name="slides"> div class="slide slide-3"> div> div> body> html>Создайте слайды со ссылками для перехода
Слайдер обычно имеет UI для перехода на определенный слайд.
Создайте ссылки для перехода, используя тег привязки . Добавьте стиль и кнопки.
Для плавности перехода слайда на компьютере и мобильном устройстве добавьте свойство scroll-behavior со значением «smooth».
Потом используйте псевдокласс :target для добавления чего-нибудь необычного при активном («active») слайде. Нажатие на одну из навигационных кнопок слайда меняет URL на # hash, и именно тогда :target будет иметь эффект.
Пример
html> html> head> title>Слайдер изображений title> style> * < box-sizing: border-box; > .slider < width: 300px; text-align: center; overflow: hidden; > .slides < display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; > .slides::-webkit-scrollbar < width: 10px; height: 10px; > .slides::-webkit-scrollbar-thumb < background: #666; border-radius: 10px; > .slides::-webkit-scrollbar-track < background: transparent; > .slides > div < scroll-snap-align: start; flex-shrink: 0; width: 300px; height: 300px; margin-right: 50px; border-radius: 10px; background: #eee; transform-origin: center center; transform: scale(1); transition: transform 0.5s; position: relative; display: flex; justify-content: center; align-items: center; font-size: 100px; > .slider > a < display: inline-flex; width: 1.5rem; height: 1.5rem; background: white; text-decoration: none; align-items: center; justify-content: center; border-radius: 50%; margin: 0 0 0.5rem 0; position: relative; > .slider > a:active < top: 1px; color: #1c87c9; > .slider > a:focus < background: #eee; > /* Навигационной кнопки не требуется */ @supports (scroll-snap-type) < .slider > a < display: none; > > html, body < height: 100%; overflow: hidden; > body < display: flex; align-items: center; justify-content: center; background: linear-gradient(to right, #1c87c9, #ffcc00); font-family: 'Ropa Sans', sans-serif; > style> head> body> div class="slider"> a href="#slide-1">1 a> a href="#slide-2">2 a> a href="#slide-3">3 a> a href="#slide-4">4 a> a href="#slide-5">5 a> div class="slides"> div id="slide-1">1 div> div id="slide-2">2 div> div id="slide-3">3 div> div id="slide-4">4 div> div id="slide-5">5 div> div> div> body> html>Создание слайд-шоу с помощью CSS и JavaScript
Прежде всего необходимо создать структуру слайдера изображений с помощью HTML и разместить изображения.
После того, как HTML структура для слайдера изображений готова, можно будет использовать CSS стили для интерфейса. Добавьте также стили к изображениям, фонам и т. д. Кроме этого, вам понадобится сделать изображения адаптивными и совместимыми с браузерами, используя CSS свойства.
Сейчас уже можно добавить часть с JavaScript:
Пример
html> html> head> title>Изображения из слайд-шоу title> style> * box-sizing: border-box> body < font-family: Verdana, sans-serif; margin:0> .mySlides display: none> img vertical-align: middle;> .slideshow-container < max-width: 1000px; position: relative; margin: auto; > /* Кнопки next & previous*/ .prev, .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; > /* Измените положение "next button" */ .next < right: 0; border-radius: 3px 0 0 3px; > /* Добавьте черный фоновый цвет с небольшой прозрачностью*/ .prev:hover, .next:hover < background-color: rgba(0,0,0,0.8); > /* Подпись под изображением */ .text < color: #ffffff; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; > /* Number text (1/3 etc) */ .numbertext < color: #ffffff; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; > /* Точки/маркеры/указатели */ .dot < cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #999999; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; > .active, .dot:hover < background-color: #111111; > /* Выцветание анимации */ .fade < -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; > @-webkit-keyframes fade < from opacity: .4> to opacity: 1> > @keyframes fade < from opacity: .4> to opacity: 1> > /* Для маленьких экранов увеличьте размер текста */ @media only screen and (max-width: 300px) < .prev, .next,.text font-size: 11px> > style> head> body> div class="slideshow-container"> div class="mySlides fade"> div class="numbertext">1 / 3 div> img src="/uploads/media/default/0001/03/66cf5094908491e69d8187bcf934050a4800b37f.jpeg" style="width:100%"> div class="text">Лондон, Англия div> div> div class="mySlides fade"> div class="numbertext">2 / 3 div> img src="/uploads/media/default/0001/03/b7d624354d5fa22e38b0ab1f9b905fb08ccc6a05.jpeg" style="width:100%"> div class="text">Заход солнца в Румынии div> div> div class="mySlides fade"> div class="numbertext">3 / 3 div> img src="/uploads/media/default/0001/03/5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg" style="width:100%"> div class="text">Нью-Йорк, США div> div> a class="prev" onclick="plusSlides(-1)">❮ a> a class="next" onclick="plusSlides(1)">❯ a> div> br> div style="text-align:center"> span class="dot" onclick="currentSlide(1)"> span> span class="dot" onclick="currentSlide(2)"> span> span class="dot" onclick="currentSlide(3)"> span> div> script> var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) < showSlides(slideIndex += n); > function currentSlide(n) < showSlides(slideIndex = n); > function showSlides(n) < var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) 1> if (n < 1) 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[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; > script> body> html>Для создания автоматического слайд-шоу используйте следующий код:
Пример
html> html> head> title>Изображения из слайд-шоу title> style> * box-sizing: border-box> body < font-family: Verdana, sans-serif; margin:0 > .mySlides display: none> img vertical-align: middle;> .slideshow-container < max-width: 1000px; position: relative; margin: auto; > /* Кнопки next & previous */ .prev, .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; > /* Измените положение "next button" */ .next < right: 0; border-radius: 3px 0 0 3px; > /* Добавьте черный фоновый цвет с небольшой прозрачностью */ .prev:hover, .next:hover < background-color: rgba(0,0,0,0.8); > /* Подпись под изображением */ .text < color: #ffffff; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; > /* Number text (1/3 etc) */ .numbertext < color: #ffffff; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; > /* Точки/маркеры/указатели */ .dot < cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #999999; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; > .active, .dot:hover < background-color: #111111; > /* Выцветание анимации */ .fade < -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; > @-webkit-keyframes fade < from opacity: .4> to opacity: 1> > @keyframes fade < from opacity: .4> to opacity: 1> > /* Для маленьких экранов увеличьте размер текста */ @media only screen and (max-width: 300px) < .prev, .next,.text font-size: 11px> > style> head> body> div class="slideshow-container"> div class="mySlides fade"> div class="numbertext">1 / 3 div> img src="/uploads/media/default/0001/03/66cf5094908491e69d8187bcf934050a4800b37f.jpeg" style="width:100%"> div class="text">Лондон, Англия div> div> div class="mySlides fade"> div class="numbertext">2 / 3 div> img src="/uploads/media/default/0001/03/b7d624354d5fa22e38b0ab1f9b905fb08ccc6a05.jpeg" style="width:100%"> div class="text">Заход солнца в Румынии div> div> div class="mySlides fade"> div class="numbertext">3 / 3 div> img src="/uploads/media/default/0001/03/5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg" style="width:100%"> div class="text">Нью-Йорк, США div> div> a class="prev" onclick="plusSlides(-1)">❮ a> a class="next" onclick="plusSlides(1)">❯ a> div> br> div style="text-align:center"> span class="dot" onclick="currentSlide(1)"> span> span class="dot" onclick="currentSlide(2)"> span> span class="dot" onclick="currentSlide(3)"> span> div> script> var slideIndex = 0; showSlides(); function showSlides( ) < var i; var slides = document.getElementsByClassName("mySlides"); for (i = 0; i < slides.length; i++) < slides[i].style.display = "none"; > slideIndex++; if (slideIndex > slides.length) 1> slides[slideIndex-1].style.display = "block"; setTimeout(showSlides, 2000); // Change image every 2 seconds > script> body> html>