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

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

  • автор:

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

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

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

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

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

  • Самоучитель HTML4
  • Самоучитель CSS
  • Как добавить картинку на веб-страницу?
  • Спецсимволы
  • Структура HTML-кода
  • Введение в HTML
  • Способы добавления стилей на страницу
  • Выравнивание текста
  • Якоря
  • Позиционирование элементов
  • Как добавить иконку сайта в адресную строку браузера?
  • Ссылки

Интересный и одновременно простой слайдер на чистом 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 css?

Что-то получилось. Надо смотреть через caniuse на поддержку другими браузерами, но у меня в 109 Google работает корректно.

.container < padding: 2rem; >.slider-wrapper < position: relative; max-width: 48rem; margin: 0 auto; >.slider < display: flex; aspect-ratio: 16 / 9; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; >.slider img < flex: 1 0 100%; scroll-snap-align: start; >.slider-nav < display: flex; column-gap: 1rem; position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 1; >.slider-nav a < width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: #fff; opacity: 0.75; >::-webkit-scrollbar
 
Картинка-1 Картинка-1 Картинка-1

Как создать слайдер изображений или слайд-шоу

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

Обычно слайдеры изображений создаются с помощью 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>

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

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