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

Адаптивный слайдер в простом режиме HTML + CSS

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

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

Как пример, если этот слайд рассматривать в небольшой ширине:

Адаптивный стиль небольшого слайдера на CSS для сайта

Установка:

HTML

Код

CSS

Код

.stavim_shirinu{
  text-align:left;
  margin: 0em auto 0em auto;
  max-width:764px;
  background:white;
}

.adaptivnaya_slayder{
  margin:2em 0em 2em 0em;
  padding:6px;
  background:#161625;
  width:100%;
  color:fbf4f4;
  text-align:center;
}

.adaptivnaya_slayder img{
  padding:0px;
  max-width:100%;
  position:absolute;
  top:20px;
  left:0px;
  display:block;
  visibility:hidden;
  opacity:0;
  transition:visibility 0s linear 0.4s,opacity 0.4s ease-in-out 0s;
  -webkit-transition: visibility 0s linear 0.4s,opacity 0.4s ease-in-out 0s;
  -moz-transition: visibility 0s linear 0.4s,opacity 0.4s ease-in-out 0s;
  -o-transition: visibility 0s linear 0.4s,opacity 0.4s ease-in-out 0s;
}

.adaptivnaya_slayder ol{
text-align: left;
  position: relative;
  margin: 0em;
  padding: 0em;
  color: #f3f0f0;
  list-style-type: decimal;
  list-style-position: outside;
  background: #161625;
}

.adaptivnaya_slayder ol li{
  display:inline-block;
  margin:0em;
  padding:0em 0.5em 0em 0.5em;
}

.adaptivnaya_slayder input[type="radio"]{
  margin:0em;
  padding:0em;
  cursor:pointer;
}

.adaptivnaya_slayder input[type="radio"]:checked+img{
  display:block;
  opacity:1;
  visibility:visible;
  transition:visibility 0s linear 0s,opacity 0.2s ease-in-out 0s;
  -webkit-transition: visibility 0s linear 0s,opacity 0.2s ease-in-out 0s;
  -moz-transition: visibility 0s linear 0s,opacity 0.2s ease-in-out 0s;
  -o-transition: visibility 0s linear 0s,opacity 0.2s ease-in-out 0s;
}

.adaptivnaya_slayder ol{
  list-style:none;
  counter-reset:my-counter;
}

.adaptivnaya_slayder ol li input:before {
  content:counter(my-counter, decimal);
  counter-increment:my-counter;
  display:inline-block;
  vertical-align:top;
  color:silver;
  background:#191929;
  padding:0em 0.5em 0em 0.5em;
  cursor:pointer;
}

.adaptivnaya_slayder ol li input:checked:before {
  color:white;
}

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

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

06 Сентября 2021 Загрузок: 3 Просмотров: 1002 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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