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

Адаптивный CSS слайдер без JS и jQuery

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

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

Все проверено на работоспособность, что при открытии сайта на темном фоне:

Слайдер на CSS позволяет значительно ускорить загрузку для сайта

Здесь как можно заметить мы основу просмотра сделали под мобильные аппараты:

Адаптивный CSS3-слайдер где не нужен JavaScript

Если рассматривать самый небольшой экран, где все корректно видно в изображение:

Легкие и отзывчивый слайдер для сайта

Здесь подчеркиваем, что при создании с последующим использованием с использованием слайдера, что построен на основе HTML5, то этот контент сканируется и индексируется всеми роботами поисковых систем.

А вот переходы, которые задействованы с помощью CSS3, то они эффективны и легки одновременно в использование на сайте или блогах.

Установка:

HTML

Код
<div class="consuem">  
  <div class="slaydera-pesekuca">  
  <input class="daseku-lopesan" type="radio" id="consuem-1" name="consuem" aria-hidden="true" hidden=""  
  checked="checked">  
  <div class="vusadan-pointing">  
  <img src="http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/sadelopan.jpg">  
  </div>  
  <input class="daseku-lopesan" type="radio" id="consuem-2" name="consuem" aria-hidden="true" hidden="">  
  <div class="vusadan-pointing">  
  <img src="http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/adxamisad.jpg">  
  </div>  
  <input class="daseku-lopesan" type="radio" id="consuem-3" name="consuem" aria-hidden="true" hidden="">  
  <div class="vusadan-pointing">  
  <img src="http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/kesanepus.jpg">  
  </div>  
  <label for="consuem-3" class="upavlenime prev control-1">‹</label>  
  <label for="consuem-2" class="upavlenime next control-1">›</label>  
  <label for="consuem-1" class="upavlenime prev control-2">‹</label>  
  <label for="consuem-3" class="upavlenime next control-2">›</label>  
  <label for="consuem-2" class="upavlenime prev control-3">‹</label>  
  <label for="consuem-1" class="upavlenime next control-3">›</label>  
  <ol class="kavuse-dunegos">  
  <li>  
  <label for="consuem-1" class="slide-movemen">•</label>  
  </li>  
  <li>  
  <label for="consuem-2" class="slide-movemen">•</label>  
  </li>  
  <li>  
  <label for="consuem-3" class="slide-movemen">•</label>  
  </li>  
  </ol>  
  </div>  
</div>

CSS

Код
.consuem {
  position: relative;
  box-shadow: 0px 0px 5px rgba(191, 191, 191, 0.71);
  margin-top: 26px;
  border-radius: 6px;
}

.slaydera-pesekuca {  
  position: relative;  
  overflow: hidden;  
  width: 100%;  
  border-radius: 6px;  
}  

.daseku-lopesan:checked + .vusadan-pointing {  
  position: static;  
  opacity: 100;  
}  

.vusadan-pointing {  
  position: absolute;  
  opacity: 0;  
  -webkit-transition: opacity 0.5s ease-out;  
  transition: opacity 0.5s ease-out;  
}  

.vusadan-pointing img {  
  display: block;  
  height: auto;  
  max-width: 100%;  
}  

.vusadan-pointing img {
height: 346px;
  width: 100%;
}

.upavlenime {
  background: rgba(23, 23, 23, 0.31);
  border-radius: 50%;
  color: #e6e6e6;
  cursor: pointer;
  display: none;
  font-size: 38px;
  height: 38px;
  line-height: 32px;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  cursor: pointer;
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  text-align: center;
  width: 38px;
  z-index: 10;
}

.upavlenime.prev {  
  left: 2%;  
}  

.upavlenime.next {  
  right: 2%;  
}  

.upavlenime:hover {
  background: rgba(43, 43, 43, 0.84);
  color: #dbedff;
}

#consuem-1:checked ~ .control-1,  
#consuem-2:checked ~ .control-2,  
#consuem-3:checked ~ .control-3 {  
  display: block;  
}  

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

.kavuse-dunegos li {  
  display: inline-block;  
  margin: 0 5px;  
}  

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

.slide-movemen:hover {  
  color: #fff;  
}  

#consuem-1:checked  
  ~ .control-1  
  ~ .kavuse-dunegos  
  li:nth-child(1)  
  .slide-movemen,  
#consuem-2:checked  
  ~ .control-2  
  ~ .kavuse-dunegos  
  li:nth-child(2)  
  .slide-movemen,  
#consuem-3:checked  
  ~ .control-3  
  ~ .kavuse-dunegos  
  li:nth-child(3)  
  .slide-movemen {  
  color: #f3be81;  
}

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

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

Демонстрация
2020-03-07 Загрузок: 1 Просмотров: 294 Комментарий: (0)

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

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

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

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