Как написать слайдер на javascript для сайта

Как сделать слайдер на JS?

В этой статье ты узнаешь как сделать сенсорный слайдер на HTML, CSS и JavaScript. Помогать в этом нам будет библиотека Swiperjs. Я не считаю себя мастером в JS, всегда есть чему учиться, поэтому если вы знаете как написать какие-то фрагменты кода проще, эффективнее и лучше, то обязательно напишите в комменты.

Первым делом создаем файл index.html и открываем его на редактирование. С начало создаем основную структуру страницы:

      Slider

Далее нужно подключить SwiperJS, для этого переходим в документацию библиотеки — https://swiperjs.com/get-started Чуть ниже заголовка «Use Swiper from CDN» копируем подключения и вставляем между тегами head:

Затем прописываем div с классом «swiper mySwiper». В нем создаем div c классом «swiper-wrapper» и далее в этом блоке прописываем div c классом «swiper-slide», создадим их 5 штук — Это будут наши слайды, в них я помещу для примера чисто картинки.
Потом в диве с классом «swiper mySwiper» создадим еще один div с классом «swiper-pagination» — это будет пагинация.

Теперь пропишем стрелки, для этого создаем 2 дива. Первая стрелка будет с классом «swiper-button-next», а вторая с «swiper-button-prev». В итоге весь html-код должен выглядеть таким образом:

Дальше накинем немного CSS стилей.
Тегам html и body зададим height: 100% и font-size: 15px;
К классу «swiper» пропишем width: 1000px; и height: 100%;
К слайдам зададим следующие стили: text-align: center; font-size: 18px; background-color: #fff; display: flex; justify-content: center; align-items: center;
Еще пропишем к swiper-slide img — width: 58%; и object-fit: cover; — Это размер картинок.

Также немного изменим у стрелок отталкивание от краев:
.swiper-button-next, .swiper-rtl .swiper-button-prev right: 140px !important;
left: auto;
>
.swiper-button-prev, .swiper-rtl .swiper-button-next left: 140px !important;
right: auto;
>
В итоге у вас должен получится вот такой css-код:

 html, body < height: 100%; font-size: 15px; >.swiper < width: 1000px; height: 100%; >.swiper-slide < text-align: center; font-size: 18px; background-color: aliceblue; display: flex; justify-content: center; align-items: center; >.swiper-slide img < width: 58%; object-fit: cover; >.swiper-button-next, .swiper-rtl .swiper-button-prev < right: 140px !important; left: auto; >.swiper-button-prev, .swiper-rtl .swiper-button-next

Переходим к JavaScript.

Тут код довольно простой:

То как работает слайдер вы можете посмотреть в моем ролике:

Весь иcходный код вы можете найти в моем GitHub.

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

Как сделать простой слайдер на HTML и JavaScript

Вы сверстали сайт и сделали его красивым с помощью CSS. Осталось добавить интерактива, и можно добавлять проект в портфолио.

«Оживить» на сайте можно что угодно: меню, модальные окна, корзину, пагинацию… В этой статье мы разберём слайдер — посмотрим, как его сделать на чистом JavaScript. Слайдер пригодится для раздела с отзывами, фотографиями сотрудников, изображениями товаров или чего-нибудь ещё — всё зависит только от вашей фантазии и проекта.

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

Пример простого слайдера на чистом JavaScript

See the Pen Untitled by Feizerr (@feizerr) on CodePen.

Что здесь происходит

Мы ищем в HTML-разметке контейнер слайдера, кнопки и изображения. Записываем всё в переменные.
Находим общее количество слайдов. Затем создаём переменную slideIndex и делаем её равной 0 — это индекс активного слайда
Добавляем обработчики событий на кнопки, чтобы реагировать на клики пользователя.
Когда пользователь нажимает на кнопку .prev-button , мы переключаемся на предыдущий слайд (если текущий слайд не первый) и обновляем отображение слайдера.
Когда пользователь нажимает на кнопку .next-button , переключаемся на следующий слайд (если текущий слайд не последний) и обновляем отображение слайдера.
Функция updateSlider() обновляет отображение слайдера, показывая только текущий слайд и скрывая остальные.
При загрузке страницы мы вызываем updateSlider() , чтобы отобразить первый слайд и настроить слайдер для начала работы.

Этот код можно бесконечно менять и дорабатывать: настроить анимацию, удалить зацикливание или сделать слайдер адаптивным. Или можно использовать наш пример, чтобы понять, как работает слайдер, а затем написать свой код — ещё проще и чище.

Материалы по теме

Стоит ли делать слайдеры на 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

Обучение веб-разработке на практике: пишем слайдер на 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:
Как сделать слайдер на js
Для создания простого слайдера на JavaScript нам понадобится следующее:

HTML-разметка для слайдера, которая будет содержать контейнер для изображений и кнопки для переключения между ними. Допустим, у нас есть следующий код:

 class="slider">  src="img1.jpg" />  src="img2.jpg" />  src="img3.jpg" />  class="prev">Назад  class="next">Вперед  

CSS-стили для слайдера, чтобы задать ему размеры, расположение и другие свойства. Например:

.slider  width: 500px; height: 300px; position: relative; overflow: hidden; > .slider img  width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.5s ease; > .slider img.active  opacity: 1; > .slider button  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; > .slider .prev  left: 10px; > .slider .next  right: 10px; > 

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

const images = document.querySelectorAll('.slider img'); let currentIndex = 0; function showImage(index)  images[currentIndex].classList.remove('active'); images[index].classList.add('active'); currentIndex = index; > document .querySelector('.slider.controlls') .addEventListener('click', function (event)  if (event.target.classList.contains('prev'))  let index = currentIndex - 1; if (index  0)  index = images.length - 1; > showImage(index); > else if (event.target.classList.contains('next'))  let index = currentIndex + 1; if (index >= images.length)  index = 0; > showImage(index); > >); showImage(currentIndex); 
Этот код добавляет обработчик событий на контейнер слайдера и при нажатии на кнопки "Назад" и "Вперед" вызывает функцию showImage , которая меняет классы активности на изображениях и обновляет значение переменной currentIndex .


Похожие публикации:

Как из pt сделать px в фотошопе
Как переключить на русский язык на gorenje
Как перенести информацию со старого телефона на новый андроид
Какое масло для квадроцикла линхай ямаха 550