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

Слайдер для сайта с использованием CSS

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

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

Большинство слайдов, которые предназначены для изображений построены с использованием CSS, HTML и одной или других библиотек JavaScript, но кроме этого, где все работает на чистой стилистике CSS. Так, что, если так получится, что вы не очень опытны в выполнении такой задачи, то здесь вам нужно поставить код, где хотите видеть слайд и прописать стили, и на этом вся установка.

Будет demo страница, где добавлен фон и много разных оттенков, вообще так выглядит.

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

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

HTML

Код

CSS

Код

* {
  margin: 0;
  padding: 0;
  /*transition*/
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.sazarunakop {
  height: 248px;
  left: 50%;
  margin: -130px -230px;
  position: absolute;
  top: 48%;
  width: 448px;
  /*box-shadow*/
  -webkit-box-shadow: 0 0 5px #151414;
  -moz-box-shadow: 0 0 5px #151414;
  box-shadow: 0 0 5px #151414;
}
.sazarunakop .teaeveneing {
  height: 248px;
  position: relative;
}
.sazarunakop .teaeveneing .gudsanmakes {
  height: 248px;
  list-style: none;
  position: absolute;
  width: 448px;
}
.sazarunakop .gudsanmakes:target { z-index: 100 }
.sazarunakop .teaeveneing .gudsanmakes img {
  height: 248px;
  width: 448px;
}
.sazarunakop .teaeveneing .gudsanmakes nav a {
  background: hsla(0,0%,0%,.75);
  color: #fff;
  font-size: 16px;
  line-height: 50px;
  margin-top: -25px;
  opacity: 0;
  position: absolute;
  text-align: center;
  text-decoration: none;
  top: 50%;
  width: 50px;
  visibility: hidden;
  z-index: 10;
}
.sazarunakop:hover .teaeveneing .gudsanmakes nav a {
  opacity: 1;
  visibility: visible;
}
.sazarunakop .teaeveneing .gudsanmakes nav .prev {
  /*border-radius*/
  -webkit-border-radius: 0 30px 30px 0;
  -moz-border-radius: 0 30px 30px 0;
  border-radius: 0 30px 30px 0;
  left: 0;
}
.sazarunakop .teaeveneing .gudsanmakes nav .next {
  /*border-radius*/
  -webkit-border-radius: 30px 0 0 30px;
  -moz-border-radius: 30px 0 0 30px;
  border-radius: 30px 0 0 30px;
  right: 0;
}
.sazarunakop .teaeveneing .gudsanmakes nav a:hover { background: #1b1a1a }
.sazarunakop .seplacemen {
  bottom: 0;
  font-size: 0;
  opacity: 0;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 100;
}
.sazarunakop:hover .seplacemen { opacity: .9 }
.sazarunakop .seplacemen li { display: inline-block }
.sazarunakop .seplacemen a {
  background: hsla(0,0%,100%,.9);
  border: 1px solid hsla(0,0%,0%,.9);
  /*border-radius*/
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  display: block;
  height: 10px;
  margin: 10px 5px;
  text-decoration: none;
  width: 10px;
}
.sazarunakop .seplacemen a:hover { background: hsla(0,0%,50%,.9) }
.sazarunakop #one:target ~ .seplacemen a[href="#one"], .sazarunakop #two:target ~ .seplacemen a[href="#two"], .sazarunakop #three:target ~ .seplacemen a[href="#three"], .sazarunakop #four:target ~ .seplacemen a[href="#four"], .sazarunakop #five:target ~ .seplacemen a[href="#five"] {
  background: hsla(0,0%,0%,.9);
  border-color: hsla(0,0%,100%,.9);
  background: rgb(244,246,245);
  /*box-shadow*/
  -webkit-box-shadow: inset 0 0 3px #191818,0 0 2px rgba(23, 23, 23, 0.5),0 2px 3px #7b7878;
  -moz-box-shadow: inset 0 0 3px #191818,0 0 2px rgba(23, 23, 23, 0.5),0 2px 3px #7b7878;
  box-shadow: inset 0 0 3px #191818,0 0 2px rgba(23, 23, 23, 0.5),0 2px 3px #7b7878;
}

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

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

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

26 Марта 2019 Загрузок: 3 Просмотров: 1082 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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