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

Великолепный слайдер на чистом CSS

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

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

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

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

Приступаем к установке:

HTML

Код

CSS

Код

body, html {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  overflow: hidden;
}

input {
  position: absolute;
  opacity: 0;
  margin-top: 95vh;
  cursor: pointer;
}

label {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: solid 2px white;
  border-radius: 999px;
  background-color: transparent;
  margin: 95vh 6px 0 6px;
  z-index: 2;
  cursor: pointer;
  transition-duration: .4s;
}

input:checked + label{
  background-color: white;
}

input:focus + label{
  box-shadow: 0 0 0 2px teal, 0 0 18px white;
}

.besacopunad_kegunkam {
  position: absolute;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  transform: translateX(-100%);
  transition-duration: .4s;
  opacity: 1;
}

input:checked ~ .besacopunad_kegunkam {
  transform: translateX(100%);
}

input:checked + label + .besacopunad_kegunkam {
  transform: translateX(0);
  opacity: 1;
}

.copuunkam1{
  background-image: url(http://zornet.ru/_fr/56/8744372.jpg);
}
.copuunkam2{
  background-image: url(http://zornet.ru/_fr/56/3982846.jpg);
}
.copuunkam3{
  background-image: url(http://zornet.ru/_fr/56/2660587.jpg);
}
.copuunkam4{
  background-image: url(http://zornet.ru/_fr/56/5108487.jpg);
}
.copuunkam5{
  background-image: url(http://zornet.ru/_fr/56/5250040.jpg);
}

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

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

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

16 Марта 2019 Загрузок: 2 Просмотров: 1246 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

Комментарии: 0