ZorNet.Ru — сайт для вебмастера » HTML и CSS » Простой слайдер изображений в HTML + CSS

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

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

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

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

Так выглядит на светлом формате:

Этот вид с планшета, где все корректно выводит:

Здесь можно наблюдать, как будет смотреться на мобильном телефоне:

Установочный процесс:

HTML

Код

CSS

Код

.adaptivny-slayder {
  position: relative;
  max-width: 680px;
  margin: 50px auto;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}

.adaptivny-slayder input[name="kadoves"] {
  display: none;
}

.kadoves {
  position: absolute;
  left: 0;
  bottom: -40px;
  text-align: center;
  width: 100%;
}

.kadoves label {
  display: inline-block;
  width: 8px;
  height: 8px;
  cursor: pointer;
  margin: 0 3px;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, .8);
  border-radius: 50%;
  border: 5px solid #2f363c;
  background-color: #738290;
}

#slaid1:checked~.kadoves label[for="slaid1"] {
  background-color: white;
}

#slaid2:checked~.kadoves label[for="slaid2"] {
  background-color: white;
}

#slaid3:checked~.kadoves label[for="slaid3"] {
  background-color: white;
}

.adaptivny-slayder-lasekun {
  overflow: hidden;

}

.abusteku-deagulus {
  display: flex;
  width: 100%;
  transition: all 0.5s;
}

.abusteku-deagulus img {
  width: 100%;
  flex-shrink:0;
}

#slaid1:checked~adaptivny-slayder-lasekun abusteku-deagulus {
  transform: translate(0);
}

#slaid2:checked~.adaptivny-slayder-lasekun .abusteku-deagulus {
  transform: translateX(-100%);
}

#slaid3:checked~.adaptivny-slayder-lasekun .abusteku-deagulus {
  transform: translateX(-200%);
}

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

Демонстрация

Спасибо сайту toster.ru, где разрешили проблему на счет адаптивности дизайна.

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

24 Августа 2019 Загрузок: 5 Просмотров: 23909 Комментариев: (14)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 14
Порядок вывода комментариев: burdinevgeny 07 Февраля 2021 09:01¹ +1 Слайдер классный, но у меня проблема - как только добавляю ссы лку к картинке слайдера, он просто разбивается на три отдельных картинки в ряд ... -SAM- 07 Февраля 2021 17:29² 0 В таком случае вместо прописи анкора можно использовать событие onclick (пример) для изображений. Но вам там достаточно просто дописать: Код .abusteku-deagulus a { display: inherit; /наследует значение родителя, то есть в нашем случае flex или же inline-flex/ flex-shrink: 0; } Пробуйте ;) burdinevgeny 10 Февраля 2021 10:20³ -1 спс, щас затестим :) ksyusha577566 24 Апреля 2021 10:13⁴ 0 Слайдер отличный, но что нужо добавить, чтобы изображения перелистывались автоматически? Kosten 24 Апреля 2021 12:49⁵ 0 Этот слайдер изначально идет под ручной режим, посмотрите на сайте есть автоматические по смене изображений, что аналогично идут адаптивными на все мобильные аппараты. -SAM- 28 Апреля 2021 05:26⁶ 0 Чтобы была автопрокрутка, то подключаем JS: Код <script type="text/javascript"> var switcher = $('.kadoves label:first-child'); var delayTime = 5000; // задержка в миллисекундах $(document).ready(function(){ $(switcher).addClass("active"); setTimeout(autoAddClass, delayTime); }); function autoAddClass(){ var next = $(".active").removeClass("active").next(); if(next.length) $(next).addClass('active'); else $(switcher).addClass('active'); $(".kadoves .active").click(); //автоклик setTimeout(autoAddClass, delayTime); } </script> Но ранее Kosten правильно подметил, что здесь расчёт на другое был. P.S.: вот можно еще посмотреть подобный слайдер с его обсуждением на форуме. brand 12 Мая 2022 12:04⁷ 0 А как сделать прокрутку мышкой, а не точками? Kosten 12 Мая 2022 14:24⁸ 0 Нужно кардинально переписывать код и выставлять данные функции. blastEr 03 Сентября 2022 22:58⁹ 0 Ничего не работает, все как сказал "burdinevgeny". Совет ниже не особо понятно как применить, такого класса даже нет ".abusteku-deagulus" blastEr 03 Сентября 2022 22:59¹⁰ 0 ВЫВОД - СТАТЬЯ ХЕРНЯ. Только время потратите на разбирательство Kosten 04 Сентября 2022 05:30¹¹ +1 Здесь же в материале демонстрация выставлена, люди посмотрят, как у вас не чего не работает, а на демонстрации все корректно выводит. Вывод, материал рабочий, статьи здесь изначально не было.))) -SAM- 06 Сентября 2022 20:09¹² 0 Всё там правильно написано, blastEr. Я бы не стал давать скрипт к нерабочему. Класс тоже на месте: <div class="abusteku-deagulus"> (в общем, не о чём ваши замечания, разбирайтесь в html-css). smoukercrash 06 Октября 2024 22:10¹³ +1 Спасибо большое! Все работает! Kosten 07 Октября 2024 18:17¹⁴ 0 Что сказать, это отличная новость)))