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

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

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

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

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

Отзывчивый слайдер на CSS для сайта

Установка:

HTML

Код
<div>
  <div class="perevorosa">
  <ul class="asdeshows">
  <input type="radio" name="radio-buttons" id="img-1" checked />
  <li class="slayd-konetusa">
  <div class="slayd-kartunka">
  <img src="Здесь устанавливаем ссылку на картинку #1">
  </div>
  <div class="perevorosa-controls">
  <label for="img-3" class="prev-slide">
  <span>‹</span>
  </label>
  <label for="img-2" class="next-slide">
  <span>›</span>
  </label>
  </div>
  </li>
  <input type="radio" name="radio-buttons" id="img-2" />
  <li class="slayd-konetusa">
  <div class="slayd-kartunka">
  <img src="Ссылка на второй снимок на слайд">
  </div>
  <div class="perevorosa-controls">
  <label for="img-1" class="prev-slide">
  <span>‹</span>
  </label>
  <label for="img-3" class="next-slide">
  <span>›</span>
  </label>
  </div>
  </li>
  <input type="radio" name="radio-buttons" id="img-3" />
  <li class="slayd-konetusa">
  <div class="slayd-kartunka">
  <img src="Прописываем ссылку для вывода изображений">
  </div>
  <div class="perevorosa-controls">
  <label for="img-2" class="prev-slide">
  <span>‹</span>
  </label>
  <label for="img-1" class="next-slide">
  <span>›</span>
  </label>
  </div>
  </li>
  <div class="perevorosa-dots">
  <label for="img-1" class="perevorosa-dot" id="img-dot-1"></label>
  <label for="img-2" class="perevorosa-dot" id="img-dot-2"></label>
  <label for="img-3" class="perevorosa-dot" id="img-dot-3"></label>
  </div>
  </ul>
  </div>
</div>

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, где реально его можете оценить по всему функционалу.

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

Демонстрация
2022-02-05 Загрузок: 5 Просмотров: 737 Комментарий: (0)

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

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

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

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