Как делать слайдеры css
Перейти к содержимому

Как делать слайдеры css

  • автор:

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

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

Интересный и одновременно простой слайдер на чистом CSS3

Я никому не открою Америку, не удивлю публику новым фокусом и не взорву мозг тем, кто в CSS3 плавает, как аквалангист. Расскажу простой способ, как создать слайдер с помощью простых функций CSS3 без необходимости использовния javascript.

1. Верстаем основу

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

Здесь мы видим, что общий блок «wrapper» содержит в себе блок «slider» с 5-ю слайдами, внутри которых можно поместить любой html-код, который будет располагаться на слайде. Перед общим блоком находятся радио-кнопки, которые впоследствии будут скрыты, чтобы создать для них собственную панель навигации по слайдам, с которой нам помогут лейблы в блоке «controls».

2. Оформляем слайдер

Здесь мы остановимся и немного рассмотрим css. Обратите внимание, что для некоторых свойств проставлены кроссбраузерные префиксы, чтобы все современные браузеры могли их понимать.

* < margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; >body < background-image: url(http://habrastorage.org/files/996/d76/d04/996d76d0410d422fa54cc433ce7ead2a.png); >

С оформлением фона и общими стилями всё понятно.

.wrapper < height: 350px; margin: 100px auto 0; position: relative; width: 700px; >.slider

Общий блок и блок с слайдером имеют одинаковые размеры, чтобы идеально контролировать положение слайдера на странице. Пока отсутствуют слайды, слайдер мы временно покрасили в светло-серый цвет.

.wrapper > input

Радио-кнопки скрываем. Они нам понадобятся позже.

Результат на данный момент такой:

image

3. Оформляем слайды

Здесь мы пропишем общие стили для слайдов и каждый слайд отдельно:

.slides < height: inherit; position: absolute; width: inherit; >.slide1 < background-image: url(http://habrastorage.org/files/3f2/628/bd5/3f2628bd58c8452db516195cb0c9bfc9.jpg); >.slide2 < background-image: url(http://habrastorage.org/files/3e1/95d/c7f/3e195dc7f5a64469807f49a14f97ba0e.jpg); >.slide3 < background-image: url(http://habrastorage.org/files/663/6b1/d4f/6636b1d4f8e643d29eab8c192fc1cea3.jpg); >.slide4 < background-image: url(http://habrastorage.org/files/e59/424/c04/e59424c046be4dab897d84ab015c87ea.jpg); >.slide5 < background-image: url(http://habrastorage.org/files/53c/ff6/c1c/53cff6c1caf842368c70b8ef892d8402.jpg); >

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

image

4. Делаем навигацию по слайдам

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

.wrapper .controls < left: 50%; margin-left: -98px; position: absolute; >.wrapper label < cursor: pointer; display: inline-block; height: 8px; margin: 25px 12px 0 16px; position: relative; width: 8px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; >.wrapper label:after

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

image

5. Учим кнопки нажиматься

Пришло время научить слайдер переключать слайды по нажатию на определённую кнопку:

.wrapper label < cursor: pointer; display: inline-block; height: 8px; margin: 25px 12px 0 16px; position: relative; width: 8px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-transition: background ease-in-out .5s; -moz-transition: background ease-in-out .5s; -o-transition: background ease-in-out .5s; transition: background ease-in-out .5s; >.wrapper label:hover, #slide1:checked ~ .controls label:nth-of-type(1), #slide2:checked ~ .controls label:nth-of-type(2), #slide3:checked ~ .controls label:nth-of-type(3), #slide4:checked ~ .controls label:nth-of-type(4), #slide5:checked ~ .controls label:nth-of-type(5)

В оформленные кнопки навигации добавляем плавное окрашивание внутри них. Также добавляем условия, при которых активная кнопка и кнопка, на которую навели курсор, будет плавно окрашиваться. Наши собственные радио-кнопки готовы:

image

6. Оживляем слайдер

Ну, а теперь делаем так, чтобы слайды наконец-то переключались:

.slides < height: inherit; opacity: 0; position: absolute; width: inherit; z-index: 0; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); -webkit-transition: transform ease-in-out .5s, opacity ease-in-out .5s; -moz-transition: transform ease-in-out .5s, opacity ease-in-out .5s; -o-transition: transform ease-in-out .5s, opacity ease-in-out .5s; transition: transform ease-in-out .5s, opacity ease-in-out .5s; >#slide1:checked ~ .slider > .slide1, #slide2:checked ~ .slider > .slide2, #slide3:checked ~ .slider > .slide3, #slide4:checked ~ .slider > .slide4, #slide5:checked ~ .slider > .slide5

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

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

Результат можно посмотреть здесь: демка слайдера.

Итог

Слайдер не требует js. Пускай он не умеет сам переключаться, но любому, кто знает основы CSS, transition и transform, будет легко придумать свои эффекты для переключения слайдов.

P.S. За основу взят слайдер от «Sorax», который я переделал на свой лад.

Как сделать простой слайдер на 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-разработчик».

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

  • Стоит ли делать слайдеры на CSS
  • 9 книг по JavaScript для начинающих
  • Как работают колбэки в JavaScript
  • Как составлять регулярные выражения
  • Как сделать список задач с drag & drop

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

Читать дальше

Объект URL в JavaScript: полный разбор

Объект 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

Генерация QR-кодов на JS в 4 шага. Node.js + qrcode

Сегодня сделаем простой REST API на Node.js и Express, который будет генерировать QR-коды для любой ссылки. Если у вас ещё не установлены Node.js и npm , установите их с официального сайта.

  • 22 ноября 2023

ChatGPT не справляется

ChatGPT не справляется

Притворитесь нейросетью и решите 101 задачку по JavaScript как можно быстрее.

  • 2 ноября 2023

Знакомство с JavaScript

Знакомство с JavaScript

Теперь, когда вы знаете, как создать структуру веб-страницы с помощью HTML и оформить ее стилями с помощью CSS, пришло время оживить её с помощью JavaScript (JS). JavaScript — это мощный язык программирования, который используется для создания интерактивных и динамических веб-сайтов.

Вы можете добавить JavaScript в ваш HTML-документ двумя способами:

Встроенный JavaScript: непосредственно в HTML-документ, в тегах :

  

Внешний JavaScript: подключение внешнего .js файла к HTML-документу:

  • 1 ноября 2023

Событие onclick в JS на примерах

Событие 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 позволяет сайтам запрашивать, а пользователям предоставлять свое местоположение веб-приложениям. Геолокация может использоваться для выбора города в интернет-магазине, отображения пользователя на карте или навигации в ближайший гипермаркет.

Основной метод Geolocation API — getCurrentPosition() , но есть и другие методы и свойства, которые могут пригодиться.

  • 16 октября 2023

Что такое localStorage и как им пользоваться

Что такое localStorage и как им пользоваться

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

До localStorage разработчики часто использовали cookies, но они были не очень удобны: мало места и постоянная передача данных туда-сюда. LocalStorage появился, чтобы сделать процесс более простым и эффективным.

  • 12 октября 2023

Случайное число из диапазона

Случайное число из диапазона

Допустим, вам зачем-то нужно целое случайное число от min до max . Вот сниппет, который поможет:

function getRandomInRange(min, max)
  1. Math.random () генерирует случайное число между 0 и 1. Например, нам выпало число 0.54 .
  2. (max — min + 1): определяет количество возможных значений в заданном диапазоне. 10 — 0 + 1 = 11 . Это значит, что у нас есть 11 возможных значений (0, 1, 2, . 10).
  3. Math.random () * (max — min + 1): умножает случайное число на количество возможных значений: 0.54 * 11 = 5.94 .
  4. Math.floor (): округляет число вниз до ближайшего целого. Так, Math.floor(5.94) = 5 .
  5. . + min: смещает диапазон так, чтобы минимальное значение соответствовало min . Но в нашем примере, так как min = 0 , это не изменит результат. Пример: 5 + 0 = 5 .
  6. Итак, в нашем примере получилось случайное число 5 из диапазона от 0 до 10.

Чтобы протестировать, запустите:

console.log(getRandomInRange(1, 10)); // Тест 
  • 7 сентября 2023

В чём разница между var и let

В чём разница между 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

Подборка слайдеров для сайта на чистом CSS

ВСЕ СЛАЙДЕРЫ В ПРИМЕРАХ РАБОТАЮТ БЕЗ СКРИПТОВ. Для установки любого слайдера на свой сайт нужно скопировать HTML разметку и CSS:

Пример 1: Маленький слайдер с автоматической прокруткой фото

Это самый простой слайдер без возможности самостоятельного скроллинга фотографий. Рекомендуемый размер изображений 500x300px.

Маленький слайдер с автоматической прокруткой фото
Пример слайдера 1

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. На мой взгляд этот слайдер самый оптимальный.

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

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