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

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

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

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

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

Как пример:

1. В реальном виде, где при входе на большой монитор:

Слайдер на CSS для сайта

2. Здесь уже идет просмотр с мобильного экрана:

Мобильный слайд шоу для сайта

Установка:

HTML

Код
<div class="zornet_rugesam">
   
  <div class="zornet_rugesam__item">
  <input type="radio" class="zornet_rugesam__alopas--first" name="alopas" id="alopas1" checked />
  <img src="http://zornet.ru/CSS-ZORNET/Abvan/numerdigsa/dog-staying-warm_925x.jpg" class="zornet_rugesam__item__photo" alt="ZorNet - портал для вебмастера" />
  <label for="alopas1" class="zornet_rugesam__alopas-label label1"></label>
  <label for="alopas3" class="zornet_rugesam__gevesal zornet_rugesam__gevesal--left zornet_rugesam__gevesal--first"></label>
  <label for="alopas2" class="zornet_rugesam__gevesal zornet_rugesam__gevesal--right zornet_rugesam__gevesal--first"></label>
  </div>
   
   
  <div class="zornet_rugesam__item">
  <input type="radio" class="zornet_rugesam__alopas--second" name="alopas" id="alopas2" />
  <img src="http://zornet.ru/CSS-ZORNET/Abvan/numerdigsa/pug-in-city_925x.jpg" class="zornet_rugesam__item__photo" alt="Ключевые слова" />
  <label for="alopas2" class="zornet_rugesam__alopas-label label2"></label>
   
  <label for="alopas1" class="zornet_rugesam__gevesal zornet_rugesam__gevesal--left zornet_rugesam__gevesal--second"></label>
  <label for="alopas3" class="zornet_rugesam__gevesal zornet_rugesam__gevesal--right zornet_rugesam__gevesal--second"></label>
  </div>
   
  <div class="zornet_rugesam__item">
  <input type="radio" class="zornet_rugesam__alopas--third" name="alopas" id="alopas3" />
  <img src="http://zornet.ru/CSS-ZORNET/Abvan/numerdigsa/cute-dog-in-blanket_925x.jpg" class="zornet_rugesam__item__photo" alt="HTML И CSS" />
  <label for="alopas3" class="zornet_rugesam__alopas-label label3"></label>
   
  <label for="alopas2" class="zornet_rugesam__gevesal zornet_rugesam__gevesal--left zornet_rugesam__gevesal--third"></label>
  <label for="alopas1" class="zornet_rugesam__gevesal zornet_rugesam__gevesal--right zornet_rugesam__gevesal--third"></label>
  </div>
</div>

CSS

Код
.zornet_rugesam {
  position: relative;
}

input,  
.zornet_rugesam__item__photo {
  display: none;
}

input:checked ~ .zornet_rugesam__item__photo {
  display: block;
}

.zornet_rugesam__item__photo {
  width: 100%;
}

.zornet_rugesam__alopas-label {
  display: block;
  width: 1vw;
  height: 1vw;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, .8);
  background-color: rgba(225, 225, 225, .4);
  cursor: pointer;
  position: absolute;
  bottom: 10px;
}

.label1 {
  right: 55%;
}

.label2 {
  left: 50%;
  transform: translateX(-50%);
}

.label3 {
  left: 55%;
}

input:checked ~ .zornet_rugesam__alopas-label {
  background-color: rgba(0, 0, 0, .7);
}

.zornet_rugesam__gevesal {
  width: 15%;
  height: 100%;
  cursor: pointer;
  position: absolute;
  top: 0;
  transition: .3s;
  display: none;
}

.zornet_rugesam__gevesal:hover {
  background-color: rgba(225, 225, 225, .07);
}

.zornet_rugesam__gevesal--left {
  left: 0;
}

.zornet_rugesam__gevesal--right {
  right: 0;
}

.zornet_rugesam__alopas--first:checked ~ .zornet_rugesam__gevesal--first,
.zornet_rugesam__alopas--second:checked ~ .zornet_rugesam__gevesal--second,
.zornet_rugesam__alopas--third:checked ~ .zornet_rugesam__gevesal--third {
  display: flex;
  align-items: center;
  justify-content: center;
}

.zornet_rugesam__gevesal--left::before {
  content: '<';
  color: rgba(0, 0, 0, .7);
  font-size: 10vw;
  font-weight: 800;
}

.zornet_rugesam__gevesal--right::before {
  content: '>';
  color: rgba(0, 0, 0, .7);
  font-size: 10vw;
  font-weight: 800;
}

Так, что как не крути, но все же можете продвинуться далеко вперед с красивым функциональным слайдером только, который только использует HTML и CSS.

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

Демонстрация
27 Марта 2019 Загрузок: 1 Просмотров: 836 Комментариев: (1)

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

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

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

Комментарии: 1
Kosten
Kosten 27 Марта 2019 14:591
0
Здесь вместо стрелок можно поставить шрифтовые кнопки, что сначала делать, но в этом случай нагрузка будет больше, но зато переключатели оригинальные станут.
avatar