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

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

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

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

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

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

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

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

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

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

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

Установка:

HTML

Код

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;
}

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

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

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

07 Марта 2020 Загрузок: 3 Просмотров: 2110 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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