Как сделать простой css слайдер без Js?

Любишь создавать решения без использования JS (JavaScript)? Я, например, очень, это в каком-то смысле для меня бывает очень больной темой.

Хотя сказать честно, у таких решений всегда есть какие-то недостатки, потому пусть я их и люблю, но использовать могу не всегда и не везде. В рамках данного поста, я решил создать для тебя адаптивный простой css слайдер без JS.

Был использован лишь один css ну и html естественно. Правда изначально я сделал эту задачу на scss, но в итоге все это было скомпилировано, ну а на выхлопе, мы получили простой css.

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

Как создать слайдер без js?

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

Кроме того, к этим div, будут прилагаться еще две вещи: radio button и label. Без них не получится, а все потому, что мы должны выбрать конкретно определенный объект, ну и конечно же должна быть какая-то навигация.

Вот так наш слайдер выглядит полностью:

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

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

Что использовать при создании only css слайдера без js?

В первую очередь если присмотреться к коду, то можно увидеть, что мы использовали всего лишь 5 классов:

  • wrapper
  • slider
  • slides
  • controls
  • slide(N) – да столько будет сколько будет картинок, потому читаю за один.

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

Внутри wrapper у нас будет сделано три группы объектов: radio кнопки, слайды и переключатели. Дальше всю магию делает css ну и немного input type: radio совместно с label.

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

Дальше таким образом мы присваиваем тому изображению, которое мы выбрали свои стили с определенным селектором:

#slide1:checked~.slider>.slide1,
#slide2:checked~.slider>.slide2,
 #slide3:checked~.slider>.slide3, 
 #slide4:checked~.slider>.slide4, 
 #slide5:checked~.slider>.slide5{
                 z-index: 1; 
                 -webkit-transform: scale(1); 
                 -moz-transform: scale(1); 
                 -o-transform: scale(1); 
                 transform: scale(1); 
} 

На счет стилей все понятно, думаю, так как изображению имеют одинаковый z-index (изначально 0), то присвоив нужному 1, вы ставим его выше на 1 слой, а значит он и показывается человеку.

Как я уже говорит выше, у нашей radio кнопки которая выбрана, есть свой атрибут, который мы выбираем через селектор:

#slide1:checked~.slider>.slide1

Вся магия в знаке ~. Сначала мы ищем #slide1:checked, то есть тот id элемент которого будет иметь значение checked, ну и применяем стиль на тег, который найдется по следующему селектору .slider>.slide1.

Самые внимательные возможно заметили, что, я спрятал все radio кнопки. Но они есть и нажимаются. Вот тут вступают в бой label тег со своим полезным свойством for.

Когда мы задаем какому-то input’у свой уникальный id, то в поле label в котором обычно пишут описание к полю, можно добавить атрибут for. После нажав на этот самый лейбл, мы всегда сделаем активным input поле (кроме поля у которого type hidden).

Ну а все остальное, уже дело вкуса. Я имею ввиду анимацию и плавные подсветки. Если интересно, как оно работает, я советую поиграться в devTools, я всегда так делаю если чего-то не понимаю.

Недостатки такого css слайдера?

Они есть и это очевидно.

  • Для того чтобы сделать переключатель или перелистывание, без js не обойтись;
  • Именно у этого слайдера мы не можем добавить свои картинки с помощью программирования. Что требует некоторых изменений в коде.

Преимущества

  • Адаптивный слайдер;
  • Очень легкий по весу и быстро загружается (оптимизированный);
  • Легко настраиваемый под свои нужды.

А какие недостатки и преимущества видишь ты?

Какие инструменты я использовал для создания данного слайдера?

Не так уж и много.

  • Google Chome совместно с DevTools;
  • Sublime Text 3;
  • Prepros.

По факту все остальное лишнее, одно что еще может понадобиться, это PhotoShop чтобы сделать картинки под себя, если вдруг выбранные тобой заранее как-то не вписываются в твою задумку.

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

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