Simple slider

Делаем продвинутый слайдер на чистом javascript

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

Как это будет работать:

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

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

Если вам не понятно, то во время разработки я думаю вы всё поймёте.

Ещё посмотрите статью «Как сделать простой слайдер на чистом JavaScript», но она совсем для новичков.

Разработка слайдера:

HTML:

С теорией не много разобрались, теперь сама разработка, начнём мы с HTML, в нём создадим видимый блок с айди «viewport», внутри него будет слайдер с классом «slider», и вот уже внутри слайдера будут картинки, также ниже должен быть индикаторы какой сейчас слайдер отображается и конечно кнопки вперёд, назад.

Рассказывать что к чему здесь, я не буду, так как, если вы читаете эту статью должны знать HTML, но самое главное для слайдера, это в элемент с классом «slider» добавить атрибут «style» и значением left: 0 , это нужно для того чтобы срабатывала анимация или точнее CSS переход.

CSS:

Теперь CSS, я не буду подробно объяснять что к чему, единственное скажу, что будет использованы flexbox для слайда и CSS функция calc() , для тех кто не знает, она даёт возможность рассчитать значения свойств CSS во время их определения, там сложить их или умножить, также заблокируем прокрутку для видимого блока.

Опять же, я нечего не буду здесь объяснять, так как, вы уже должны это всё знать, только то, что все картинки должны быть равны ширине и высоте видимого блока.

JavaScript:

Теперь пожалуй самое главное, это сам скрипт, вот его мы рассмотрим подробно.

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

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

Потом программа закрашивает первый индикатор в зелёный цвет, можно сделать это через CSS, но я решил так.

Дальше идёт событие клика на кнопку вперёд, сначала он закрашивает индикатор, потом проверяет, номер слайда меньше 4, если да, то тогда номер слайда увеличивается на 1, если нет, то становится равен нулю, делам индекс зелёным и умножаем номер слайда на ширину видимого блока и присваиваем это значение к позиции left, тем самым двигая слайдер.

Про назад я не буду рассказывать, так как алгоритм не меняется, а только условии.

Вывод:

Вот такой слайдер получился на чистом JavaScript, надеюсь вам эта статья помогла, также файлы вы можете скачать.

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

Источник

Простой слайдер изображений на 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-разметки. Файл со скриптом слайдера может выглядеть так:

        … 
 …
 …      

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

  …  …  

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 > >; 

Источник

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

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

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

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

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

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

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

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

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

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

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

Slick

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

Swiper

«Самый современный мобильный сенсорный слайдер» — так разработчики говорят о своей библиотеке. В ней есть плавные переходы, 3D-анимации, автоматическое переключение слайдов, пагинация и навигация. А ещё здесь гибкие макеты: можно размещать слайды в несколько строк, добавлять несколько слайдов в столбец, управлять расстояниями между слайдами.

Owl Carousel

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

Glide.js

Легковесная и быстрая библиотека: со всеми функциями она весит всего 28 КБ (8 КБ в сжатом виде). При этом подключать всё необязательно — лишние модули можно удалить, и тогда она станет ещё легче.

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

Какую из библиотек использовать — решать вам. У каждой понятная документация с примерами кода, вы точно разберётесь, как создать слайдер. И у всех гибкие настройки. Поэтому попробуйте поработать с каждой библиотекой или просто посмотрите примеры и выберите ту, что больше нравится и подходит вам.

🚀 Чтобы делать слайдеры любой сложности и вообще что угодно в вебе, приходите на профессию «JavaScript-разработчик».

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

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

Источник