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

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

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

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

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Простой слайдер изображений на CSS и Javascript

Автор уже опубликовал скрипт карусели, который также использует только CSS и Javascript. Теперь давайте рассмотрим скрипт слайдера. Он отличается от карусели тем, что одновременно виден только один элемент, а не несколько, и элементы не прокручиваются, а медленно замещаются одно другим. И ещё. В данном слайдере в качестве элементов используются только изображения (слайды), поэтому и называется он простой слайдер изображений.

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

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

HTML – код слайдера стандартный, за исключением одного: перед изображениями помещён экран, который представляет собой однотонный рисунок белого цвета. Все изображения и экран должны быть одного размера. Число изображений произвольное.

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

Все изображения располагаются “в стопочку”, одно над другим абсолютным позиционированием в левом верхнем углу объемлющего контейнера. Экран предотвращает схлопывание внешнего контейнера. Всем изображениям присваивается CSS-свойство opacity: 0, кроме первого элемента, которому программа инициализации присваивает opacity: 1, тем самым делая его видимым.

Пролистывание элементов осуществляется плавным изменением opacity из 1 в 0 для видимого элемента и из 0 в 1 для следующего за ним невидимого элемента. Тем самым видимый элемент становится невидимым, а невидимый видимым. Плавность перехода создаёт свойство transition с длительностью 1с и функцией перехода ease-in.

img < width: 100%; !important; >/* General styles */ .sim-slider < position: relative; >.sim-slider-list < margin: 0; padding: 0; list-style-type: none; position: relative; >.sim-slider-element < width: 100%; transition: opacity 1s ease-in; opacity: 0; position: absolute; z-index: 2; left: 0; top: 0; display: block; >/* Navigation item styles */ div.sim-slider-arrow-left, div.sim-slider-arrow-right < width: 22px; height: 40px; position: absolute; cursor: pointer; opacity: 0.6; z-index: 4; >div.sim-slider-arrow-left < left: 10px; top: 40%; display: block; background: url("sim-arrow-left.png") no-repeat; >div.sim-slider-arrow-right < right: 10px; top: 40%; display: block; background: url("sim-arrow-right.png") no-repeat; >div.sim-slider-arrow-left:hover < opacity: 1.0; >div.sim-slider-arrow-right:hover < opacity: 1.0; >div.sim-slider-dots < width: 100%; height: auto; position: absolute; left: 0; bottom: 0; z-index: 3; text-align: center; >span.sim-dot

Для того, чтобы слайдер был адаптивным к любой ширине экрана, для изображений нужно указать CSS-свойство width: 100%. Для всех блочных контейнеров (div, ul, li и пр.) также width: 100% или, если нужна ширина в числовых единицах, то только max-width или min-width.

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

     Simple slider   …  …
 … …

Вызов слайдера производится по имени класса sim-slider или по идентификатору. Во втором случае можно разместить несколько слайдеров на одной странице.

  …  …

Javascript

function Sim(sldrId) < let < this.sldrRoot = id >else < this.sldrRoot = document.querySelector('.sim-slider') >; // Slider objects this.sldrList = this.sldrRoot.querySelector('.sim-slider-list'); this.sldrElements = this.sldrList.querySelectorAll('.sim-slider-element'); this.sldrElemFirst = this.sldrList.querySelector('.sim-slider-element'); this.leftArrow = this.sldrRoot.querySelector('div.sim-slider-arrow-left'); this.rightArrow = this.sldrRoot.querySelector('div.sim-slider-arrow-right'); this.indicatorDots = this.sldrRoot.querySelector('div.sim-slider-dots'); // Initialization this.options = Sim.defaults; Sim.initialize(this) >; Sim.defaults = < // Default options for the slider loop: true, // Бесконечное зацикливание слайдера auto: true, // Автоматическое пролистывание interval: 5000, // Интервал между пролистыванием элементов (мс) arrows: true, // Пролистывание стрелками dots: true // Индикаторные точки >; Sim.prototype.elemPrev = function(num) < num = num || 1; let prevElement = this.currentElement; this.currentElement -= num; if(this.currentElement < 0) this.currentElement = this.elemCount-1; if(!this.options.loop) < if(this.currentElement == 0) < this.leftArrow.style.display = 'none' >; this.rightArrow.style.display = 'block' >; this.sldrElements[this.currentElement].style.opacity = '1'; this.sldrElements[prevElement].style.opacity = '0'; if(this.options.dots) < this.dotOn(prevElement); this.dotOff(this.currentElement) >>; Sim.prototype.elemNext = function(num) < num = num || 1; let prevElement = this.currentElement; this.currentElement += num; if(this.currentElement >= this.elemCount) this.currentElement = 0; if(!this.options.loop) < if(this.currentElement == this.elemCount-1) < this.rightArrow.style.display = 'none' >; this.leftArrow.style.display = 'block' >; this.sldrElements[this.currentElement].style.opacity = '1'; this.sldrElements[prevElement].style.opacity = '0'; if(this.options.dots) < this.dotOn(prevElement); this.dotOff(this.currentElement) >>; Sim.prototype.dotOn = function(num) < this.indicatorDotsAll[num].style.cssText = 'background-color:#BBB; cursor:pointer;' >; Sim.prototype.dotOff = function(num) < this.indicatorDotsAll[num].style.cssText = 'background-color:#556; cursor:default;' >; Sim.initialize = function(that) < // Constants that.elemCount = that.sldrElements.length; // Количество элементов // Variables that.currentElement = 0; let bgTime = getTime(); // Functions function getTime() < return new Date().getTime(); >; function setAutoScroll() < that.autoScroll = setInterval(function() < let fnTime = getTime(); if(fnTime - bgTime + 10 >that.options.interval) < bgTime = fnTime; that.elemNext() >>, that.options.interval) >; // Start initialization if(that.elemCount ; if(that.elemCount >= 1) < // показать первый элемент that.sldrElemFirst.style.opacity = '1'; >; if(!that.options.loop) < that.leftArrow.style.display = 'none'; // отключить левую стрелку that.options.auto = false; // отключить автопркрутку >else if(that.options.auto) < // инициализация автопрокруки setAutoScroll(); // Остановка прокрутки при наведении мыши на элемент that.sldrList.addEventListener('mouseenter', function() < clearInterval(that.autoScroll) >, false); that.sldrList.addEventListener('mouseleave', setAutoScroll, false) >; if(that.options.arrows) < // инициализация стрелок that.leftArrow.addEventListener('click', function() < let fnTime = getTime(); if(fnTime - bgTime >1000) < bgTime = fnTime; that.elemPrev() >>, false); that.rightArrow.addEventListener('click', function() < let fnTime = getTime(); if(fnTime - bgTime >1000) < bgTime = fnTime; that.elemNext() >>, false) > else < that.leftArrow.style.display = 'none'; that.rightArrow.style.display = 'none' >; if(that.options.dots) < // инициализация индикаторных точек let sum = '', diffNum; for(let i=0; i ' >; that.indicatorDots.innerHTML = sum; that.indicatorDotsAll = that.sldrRoot.querySelectorAll('span.sim-dot'); // Назначаем точкам обработчик события 'click' for(let n=0; n else if(n > that.currentElement) < bgTime = getTime(); that.elemNext(diffNum) >// Если n == that.currentElement ничего не делаем >, false) >; that.dotOff(0); // точка[0] выключена, остальные включены for(let i=1; i > >;

Как создать слайдер/карусель фото на Javascript

Здесь мы разберем с вами принцип работы слайдеров с фотографиями и как его реализовать на Javascript.

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

Рассмотрим ниже готовую верстку, стили и скрипт слайдера.

index.hmtl — разметка слайдера

/* Контейнер с ограниченными размерами, он будет выполнять роль «окна» */ .slider-container < width: 600px; height:600px; position: relative; overflow: hidden; >/* Лента с фото, имеет неограниченную ширину и тип flex, чтобы картинки не переносились */ .slider-track < height:600px; display: flex; transition-duration: .5s; >/* Стили для оформления кнопок prev/next */ .arrow < width:7px; height:7px; border-top:#cacaca 3px solid; border-right:#cacaca 3px solid; position: absolute; >.arrow-bg < width:30px; height:30px; background: #fff; box-shadow: 0 0 4px 2px rgba(0,0,0,.2); border-radius: 50%; position: relative; opacity: .8; cursor: pointer; >.arrow-left .arrow < transform: rotate(-135deg); top:10px; left:12px; >.arrow-right .arrow < transform: rotate(45deg); top:10px; left:8px; >.arrow-left < position: absolute; top:50%; left:10px; transform: translateY(-50%); z-index: 2; >.arrow-right

scripts.js — файл с кодом слайдера

$(document).ready(function() < let sliderPosition = 0; // начальная позиция дорожки const sliderContainer = $('.slider-container'); const sliderTrack = $('.slider-track'); const sliderItem = $('.slider-item'); const sliderItemWidth = sliderItem.width(); const sliderContainerWidth = sliderContainer.width(); // ширина дорожки определяется как разница между шириной всех картинок и шириной контейнера // разница нужна для того, чтобы прокрутка не проводилась дальше последнего фото const sliderTrackWidth = sliderItem.length * sliderItemWidth - sliderContainerWidth; const sliderButtonPrev = $('.arrow-left'); const sliderButtonNext = $('.arrow-right'); sliderButtonPrev.on('click', function()< sliderPosition += sliderItemWidth; // увеличиваем отступ при нажатии назад // поскольку отступ будет всегда отрицательный, нужно сравнивать с нулем, // чтобы исключить пустые прокрутки if (sliderPosition >0) < sliderPosition = 0; >sliderTrack.css('transform', `translateX($px`); sliderButtons(); >); sliderButtonNext.on('click', function() < sliderPosition -= sliderItemWidth; // так как отступы отрицательные, нужно сравнить с отрицательной длинной дорожки, // чтобы исключить пустые прокрутки if (sliderPosition < -sliderTrackWidth) < sliderPosition = -sliderTrackWidth; >sliderTrack.css('transform', `translateX($px`); sliderButtons(); >); // скрываем кнопки prev/next, когда нельзя больше крутить const sliderButtons = () => < if (sliderPosition == 0) < sliderButtonPrev.hide(); >else < sliderButtonPrev.show(); >if (sliderPosition == -sliderTrackWidth) < sliderButtonNext.hide(); >else < sliderButtonNext.show(); >>; sliderButtons(); >);

На этом слайдер готов, остались вопросы, задавайте в комментариях и подписывайтесь на youtube-канал, там будет еще много видео по разработке и не только.

Как сделать простой слайдер на HTML и 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

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

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

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

Популярные материалы

Простой слайдер изображений на CSS и Javascript

Как создать слайдер/карусель фото на Javascript

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

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

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

Популярные библиотеки для слайдеров

Slick

Swiper

Owl Carousel

Glide.js

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

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