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

Адаптивный слайдер CSS без применения JavaScript

Этот адаптивный слайдер на CSS значительно ускорить появлению изображение слайда, который отлично подойдет на разные площадки сайты или блога. Ведь он создан на чистом CSS, где не нужно под него вписывать функционал, что заключается в JavaScript. Ведь CSS3 позволяет по своим характеристикам заменить некоторые функций со скрипта, это переходы. А точнее все что качается переключателей и кнопок, что виде стрелок, что располагаются не внутри каркаса по обеим сторонам.

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

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

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

Установка:

HTML

Код

<div id="panekodna">
  <input type="radio" name="panekodna" id="anudesu1" checked>
  <input type="radio" name="panekodna" id="anudesu2">
  <input type="radio" name="panekodna" id="anudesu3">
  <input type="radio" name="panekodna" id="anudesu4">
  <div id="anudesus">
  <div id="overflow">
  <div class="inner">
  <div class="anudesu anudesu_1">
  <div class="kadovbsa">
  <h2>Первый кадр</h2>
  <p>Здесь краткое описание</p>
  </div>
  </div>
  <div class="anudesu anudesu_2">
  <div class="kadovbsa">
  <h2>Еще один кадр</h2>
  <p>Здесь краткое описание</p>
  </div>
  </div>
  <div class="anudesu anudesu_3">
  <div class="kadovbsa">
  <h2>ZorNet.Ru — сайт для вебмастера</h2>
  <p>Интересные решения для вебмастера в создание и продвижение сайтов</p>
  </div>
  </div>
  <div class="anudesu anudesu_4">
  <div class="kadovbsa">
  <h2>Четвертый кадр</h2>
  <p>Здесь краткое описание</p>
  </div>
  </div>
  </div>
  </div>
  </div>
  <div id="controls">
  <label for="anudesu1"></label>
  <label for="anudesu2"></label>
  <label for="anudesu3"></label>
  <label for="anudesu4"></label>
  </div>
  <div id="bullets">
  <label for="anudesu1"></label>
  <label for="anudesu2"></label>
  <label for="anudesu3"></label>
  <label for="anudesu4"></label>
  </div>
</div>

CSS

Код

#panekodna {
  margin: 0 auto;
  width: 800px;
  max-width: 100%;
  text-align: center;
}
#panekodna input[type=radio] {
  display: none;
}
#panekodna label {
  cursor:pointer;
  text-decoration: none;
}
#anudesus {
  padding: 10px;
  border: 3px solid #ccc;
  background: #fff;
  position: relative;
  z-index: 1;
}
#overflow {
  width: 100%;
  overflow: hidden;
}
#anudesu1:checked ~ #anudesus .inner {
  margin-left: 0;
}
#anudesu2:checked ~ #anudesus .inner {
  margin-left: -100%;
}
#anudesu3:checked ~ #anudesus .inner {
  margin-left: -200%;
}
#anudesu4:checked ~ #anudesus .inner {
  margin-left: -300%;
}
#anudesus .inner {
  transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  width: 400%;
  line-height: 0;
  height: 300px;
}
#anudesus .anudesu {
  width: 25%;
  float:left;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #fff;
}
#anudesus .anudesu_1 {
  background: #00171F;
}
#anudesus .anudesu_2 {
  background: #003459;
}
#anudesus .anudesu_3 {
  background: #007EA7;
}
#anudesus .anudesu_4 {
  background: #00A8E8;
}
#controls {
  margin: -180px 0 0 0;
  width: 100%;
  height: 50px;
  z-index: 3;
  position: relative;
}
#controls label {
  transition: opacity 0.2s ease-out;
  display: none;
  width: 50px;
  height: 50px;
  opacity: .4;
}
#controls label:hover {
  opacity: 1;
}
#anudesu1:checked ~ #controls label:nth-child(2),
#anudesu2:checked ~ #controls label:nth-child(3),
#anudesu3:checked ~ #controls label:nth-child(4),
#anudesu4:checked ~ #controls label:nth-child(1) {
  background: url(http://zornet.ru/Ajaxoskrip/Fekstura_tekst/vesagka/130884.svg) no-repeat;
  float:right;
  margin: 0 -50px 0 0;
  display: block;
}
#anudesu1:checked ~ #controls label:nth-last-child(2),
#anudesu2:checked ~ #controls label:nth-last-child(3),
#anudesu3:checked ~ #controls label:nth-last-child(4),
#anudesu4:checked ~ #controls label:nth-last-child(1) {
  background: url(http://zornet.ru/Ajaxoskrip/Fekstura_tekst/vesagka/130882.svg) no-repeat;
  float:left;
  margin: 0 0 0 -50px;
  display: block;
}
#bullets {
  margin: 150px 0 0;
  text-align: center;
}
#bullets label {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius:100%;
  background: #ccc;
  margin: 0 10px;
}
#anudesu1:checked ~ #bullets label:nth-child(1),
#anudesu2:checked ~ #bullets label:nth-child(2),
#anudesu3:checked ~ #bullets label:nth-child(3),
#anudesu4:checked ~ #bullets label:nth-child(4) {
  background: #444;
}
@media screen and (max-width: 900px) {
  #anudesu1:checked ~ #controls label:nth-child(2),
  #anudesu2:checked ~ #controls label:nth-child(3),
  #anudesu3:checked ~ #controls label:nth-child(4),
  #anudesu4:checked ~ #controls label:nth-child(1),
  #anudesu1:checked ~ #controls label:nth-last-child(2),
  #anudesu2:checked ~ #controls label:nth-last-child(3),
  #anudesu3:checked ~ #controls label:nth-last-child(4),
  #anudesu4:checked ~ #controls label:nth-last-child(1) {
  margin: 0;
  }
  #anudesus {
  max-width: calc(100% - 140px);
  margin: 0 auto;
  }
}

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

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

18 Января 2021 Загрузок: 3 Просмотров: 1358 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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