ZorNet.Ru — сайт для вебмастера » HTML и CSS » Адаптивный слайдер HTML на чистом CSS3

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

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

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

Небольшие и кнопки позволяют легко перемещаться по данным изображениям.

Адаптивный слайдер с использованием CSS3

Установка:

HTML

Код
<div class="adapevnosug">
  <div class="adapevnosug-edsa">
  <input class="adapevnosug-nasav" type="radio" id="adapevnosug-1" name="adapevnosug" aria-hidden="true" hidden=""
  checked="checked">
  <div class="adapevnosug-kolas">
  <img src="Первая ссылка на изображение">
  </div>
  <input class="adapevnosug-nasav" type="radio" id="adapevnosug-2" name="adapevnosug" aria-hidden="true" hidden="">
  <div class="adapevnosug-kolas">
  <img src="Вторая ссылка на картинку">
  </div>
  <input class="adapevnosug-nasav" type="radio" id="adapevnosug-3" name="adapevnosug" aria-hidden="true" hidden="">
  <div class="adapevnosug-kolas">
  <img src="Третья ссылка на слайд с картинкой">
  </div>
  <label for="adapevnosug-3" class="vealulu-kadsan prev nedsug-1">‹</label>
  <label for="adapevnosug-2" class="vealulu-kadsan next nedsug-1">›</label>
  <label for="adapevnosug-1" class="vealulu-kadsan prev nedsug-2">‹</label>
  <label for="adapevnosug-3" class="vealulu-kadsan next nedsug-2">›</label>
  <label for="adapevnosug-2" class="vealulu-kadsan prev nedsug-3">‹</label>
  <label for="adapevnosug-1" class="vealulu-kadsan next nedsug-3">›</label>
  <ol class="esamon-getusa">
  <li>
  <label for="adapevnosug-1" class="adapevnosug-bullet">•</label>
  </li>
  <li>
  <label for="adapevnosug-2" class="adapevnosug-bullet">•</label>
  </li>
  <li>
  <label for="adapevnosug-3" class="adapevnosug-bullet">•</label>
  </li>
  </ol>
  </div>
</div>

CSS

Код
.adapevnosug {
  position: relative;
  box-shadow: 0px 0px 10px rgba(167, 167, 167, 0.71);
  margin-top: 26px;
  border-radius: 20px;
}

.adapevnosug-edsa {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: 20px;
}

.adapevnosug-nasav:checked + .adapevnosug-kolas {
  position: static;
  opacity: 100;
}

.adapevnosug-kolas {
  position: absolute;
  opacity: 0;
  -webkit-transition: opacity 0.6s ease-out;
  transition: opacity 0.6s ease-out;
}

.adapevnosug-kolas img {
  display: block;
  height: auto;
  max-width: 100%;
}

.vealulu-kadsan {
  background: rgba(0, 0, 0, 0.28);
  border-radius: 50%;
  color: #393939;
  cursor: pointer;
  display: none;
  font-size: 40px;
  height: 40px;
  line-height: 35px;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  cursor: pointer;
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  text-align: center;
  width: 40px;
  z-index: 10;
}

.vealulu-kadsan.prev {
  left: 2%;
}

.vealulu-kadsan.next {
  right: 2%;
}

.vealulu-kadsan:hover {
  background: rgba(0, 0, 0, 0.8);
  color: #f3be81;
}

#adapevnosug-1:checked ~ .nedsug-1,
#adapevnosug-2:checked ~ .nedsug-2,
#adapevnosug-3:checked ~ .nedsug-3 {
  display: block;
}

.esamon-getusa {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 2%;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
}

.esamon-getusa li {
  display: inline-block;
  margin: 0 5px;
}

.adapevnosug-bullet {
  color: #393939;
  cursor: pointer;
  display: block;
  font-size: 35px;
}

.adapevnosug-bullet:hover {
  color: #fff;
}

#adapevnosug-1:checked
  ~ .nedsug-1
  ~ .esamon-getusa
  li:nth-child(1)
  .adapevnosug-bullet,
#adapevnosug-2:checked
  ~ .nedsug-2
  ~ .esamon-getusa
  li:nth-child(2)
  .adapevnosug-bullet,
#adapevnosug-3:checked
  ~ .nedsug-3
  ~ .esamon-getusa
  li:nth-child(3)
  .adapevnosug-bullet {
  color: #99f6ff;
}

CSS Slider - это простая конструкция, где присутствует стилистика, и функционал, который использует преимущества переходов и преобразований CSS3 для замены слайдов с помощью элементов управления «следующий / предыдущий» и поддержки бесконечного цикла.

Демонстрация
14 Декабря 2020 Загрузок: 1 Просмотров: 3270 Комментариев: (3)

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

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

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

Комментарии: 3
akvabreggpt
akvabreggpt 06 Октября 2023 15:101
0
Подскажите, а как сделать несколько штук на одной странице?
Kosten
Kosten 06 Октября 2023 15:572
0
Сказать точно не могу, так как айди нет, разве что только классы поменять, если вам нужно второй, то напишите, я сменю классы, и сделаю демо, и потом можете устанавливать на сайт, даже на одну страницу с данным слайдером.
Kosten
Kosten 06 Октября 2023 15:593
0
Хотя зачем далеко ходить, так как здесь классы уже сменены, вот аналогичный, с него как раз менял классы, по ссылке переходите и аналогичный слайдер, только с другими классами.

Перейти - https://codepen.io/kocsten/pen/xxEqGNP
avatar