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

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

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

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

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

Как пример:

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

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

Установка:

HTML

Код

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 Просмотров: 917 Комментариев: (1)

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

СКАЧАТЬ

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

Kosten

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