ZorNet.Ru — сайт для вебмастера » HTML и CSS » Слайдер галереи для изображений на CSS

Слайдер галереи для изображений на CSS

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

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

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

Вид после как все установите:

Приступаем к установке:

HTML

Код

<div class="cemulgapleved-nekabreakpon">
  <input id="pervas" type="radio" name="image-selector" checked="checked" />
  <label for="desvagda">Просмотр картинки №4</label>
  <img src="http://zornet.ru/CSS-ZORNET/Abvan/numerdigsa/vkRz4Grjmzk.jpg" />

  <input id="vtugon" type="radio" name="image-selector" />
  <label for="pervas">Просмотр картинки №1</label>
  <img src="http://zornet.ru/CSS-ZORNET/Abvan/numerdigsa/pubg-head-2jpg.jpg" />

  <input id="degazugon" type="radio" name="image-selector" />
  <label for="vtugon">Просмотр картинки №2</label>
  <img src="http://zornet.ru/CSS-ZORNET/Abvan/numerdigsa/85cd2df.jpg" />

  <input id="desvagda" type="radio" name="image-selector" />
  <label for="degazugon">Просмотр картинки №3</label>
  <img src="http://zornet.ru/CSS-ZORNET/Abvan/numerdigsa/18125.jpeg" />

  <label for="desvagda">Просмотр картинки №4</label>
  <label for="pervas">Просмотр картинки №1</label>
</div>

CSS

Код

.cemulgapleved-nekabreakpon {
  position: relative;
  width: 537px;
  height: 300px;
  margin: 20px auto;
  border-radius: 3px;
  border: 7px solid #E8E8E8;
  box-shadow: 0px 0px 1px 1px #524e4e;
}
.cemulgapleved-nekabreakpon > img {
  display: none;
  width: 100%;
  height: 300px;
}
.cemulgapleved-nekabreakpon > input {
  position:absolute;
  left:-9999px;
}
.cemulgapleved-nekabreakpon > input:checked + label + img {
  display:block;
}

.cemulgapleved-nekabreakpon > label,
.cemulgapleved-nekabreakpon > input:checked ~ label ~ label ~ label ~ label {
  display:none;
}
.cemulgapleved-nekabreakpon > input:checked + label {
  display:block;
  left:0;
}
.cemulgapleved-nekabreakpon > input:checked ~ label ~ label ~ label {
  display:block;
  right:0;
}

.cemulgapleved-nekabreakpon > label {
  position: absolute;
  top: 0;
  width: 25%;
  height: 100%;
  visibility: hidden;
  cursor: pointer;
}
.cemulgapleved-nekabreakpon > label:before {
  content:'';
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  visibility:visible;
}
.cemulgapleved-nekabreakpon > label:after {
  display:block;
  position:absolute;
  top:50%;
  width:25px;
  height:25px;
  line-height:22px;
  margin:-15px 10px 0 10px;
  background-color:black;
  color:white;
  font-family:'Arial';
  font-weight:bold;
  font-size:18px;
  text-align:center;
  visibility:hidden;
  border:2px solid white;
  border-radius:20px;
  box-shadow:0 3px 4px black;
}
.cemulgapleved-nekabreakpon > label:hover:after {
  visibility:visible;
}

.cemulgapleved-nekabreakpon > input:checked + label:after {
  left:0;
  content:'\00AB';
}
.cemulgapleved-nekabreakpon > input:checked ~ label ~ label ~ label:after {
  right:0;
  content:'\00BB';
}

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

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

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

10 Марта 2019 Загрузок: 1 Просмотров: 2058 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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