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

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

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

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

Наводя клик на одну из двух сторон, то автоматически появляются стрелка для передвижение снимков.

Установка:

HTML

Код

CSS

Код

.perevorosa {
  margin-left: 15%;
  margin-right: 15%;
}

ul.asdeshows {
  display: block;
  position: relative;
  height: 600px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

.asdeshows * {
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

ul.asdeshows input {
  display: none;
}

.slayd-konetusa {
  display: block;
}

.slayd-kartunka {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  opacity: 0;
  transition: all .7s ease-in-out;
}

.slayd-kartunka img {
  width: auto;
  min-width: 100%;
  height: 100%;
}

.perevorosa-controls {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  font-size: 100px;
  line-height: 600px;
  color: #fff;
}

.perevorosa-controls label {
  display: none;
  position: absolute;
  padding: 0 20px;
  opacity: 0;
  transition: opacity .2s;
  cursor: pointer;
}

.slayd-kartunka:hover + .perevorosa-controls label{
  opacity: 0.5;
}

.perevorosa-controls label:hover {
  opacity: 1;
}

.perevorosa-controls .prev-slide {
  width: 49%;
  text-align: left;
  left: 0;
}

.perevorosa-controls .next-slide {
  width: 49%;
  text-align: right;
  right: 0;
}

.perevorosa-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 999;
  text-align: center;
}

.perevorosa-dots .perevorosa-dot {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.5;
  margin: 10px;
}

input:checked + .slayd-konetusa .slayd-kartunka {
  opacity: 1;
  transform: scale(1);
  transition: opacity 1s ease-in-out;
}

input:checked + .slayd-konetusa .perevorosa-controls label {
  display: block;
}

input#img-1:checked ~ .perevorosa-dots label#img-dot-1,
input#img-2:checked ~ .perevorosa-dots label#img-dot-2,
input#img-3:checked ~ .perevorosa-dots label#img-dot-3,
input#img-4:checked ~ .perevorosa-dots label#img-dot-4,
input#img-5:checked ~ .perevorosa-dots label#img-dot-5,
input#img-6:checked ~ .perevorosa-dots label#img-dot-6 {
  opacity: 1;
}

input:checked + .slayd-konetusa .nav label { display: block; }

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

Думаю понравится скользящая анимация, которая перемещается влево или вправо в зависимости от направления движения, как основного контента, так и закрепленного изображения.

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

05 Февраля 2022 Загрузок: 5 Просмотров: 1355 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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