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

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

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

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

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

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

Установка:

HTML

Код

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 Просмотров: 3654 Комментариев: (3)

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

СКАЧАТЬ

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

Kosten

Комментарии: 3
Порядок вывода комментариев: akvabreggpt 06 Октября 2023 15:10¹ 0 Подскажите, а как сделать несколько штук на одной странице? Kosten 06 Октября 2023 15:57² 0 Сказать точно не могу, так как айди нет, разве что только классы поменять, если вам нужно второй, то напишите, я сменю классы, и сделаю демо, и потом можете устанавливать на сайт, даже на одну страницу с данным слайдером. Kosten 06 Октября 2023 15:59³ 0 Хотя зачем далеко ходить, так как здесь классы уже сменены, вот аналогичный, с него как раз менял классы, по ссылке переходите и аналогичный слайдер, только с другими классами. Перейти - https://codepen.io/kocsten/pen/xxEqGNP