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

Адаптивное слайд-шоу используя CSS и JS

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

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

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

Прежде чем размещать на сайте, материал полностью проверен, где предоставлена demo страница. И при открытии страницы или сайта, во общем, где установлен слайд, то на мониторе вы уведите стандартное решение.

Слайдер на CSS для сайта на чистом CSS

Перейдя на смартфон или планшет, то почти не меняется, но разве по размеру меньше становится основной обзор.

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

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

Мобильный слайдер для сайта

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

HTML

Код
<!-- Контейнер для слайдшоу -->
<div class="sopdudase-mopasuned">

  <!-- Полноразмерные изображения с текстом номера и заголовка -->
  <div class="cenupugikasop sopuned">
  <div class="kisavunolasun">1 / 3</div>
  <img src="http://zornet.ru/CSS-ZORNET/Kodak_saita/img_nature_wide.jpg" style="width:100%">
  <div class="nadpisu">ZORNET.RU #1</div>
  </div>

  <div class="cenupugikasop sopuned">
  <div class="kisavunolasun">2 / 3</div>
  <img src="http://zornet.ru/CSS-ZORNET/Kodak_saita/img_snow_wide.jpg" style="width:100%">
  <div class="nadpisu">ZORNET.RU #2</div>
  </div>

  <div class="cenupugikasop sopuned">
  <div class="kisavunolasun">3 / 3</div>
  <img src="http://zornet.ru/CSS-ZORNET/Kodak_saita/img_lights_wide.jpg" style="width:100%">
  <div class="nadpisu">ZORNET.RU #3</div>
  </div>

  <!-- Следующая и предыдущая кнопки -->
  <a class="prev" onclick="plusSlides(-1)">❮</a>
  <a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>

<!-- Точки / круги -->
<div style="text-align:center">
  <span class="kovunegas" onclick="currentSlide(1)"></span>  
  <span class="kovunegas" onclick="currentSlide(2)"></span>  
  <span class="kovunegas" onclick="currentSlide(3)"></span>  
</div>

CSS

Код
* {box-sizing:border-box}

/* Контейнер для слайдшоу */
.sopdudase-mopasuned {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Скрыть изображения по умолчанию */
.cenupugikasop {
  display: none;
}

/* Следующие и предыдущие кнопки */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Расположите «следующую кнопку» вправо */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* При наведении курсора добавьте черный фон с немного прозрачным */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.nadpisu {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.kisavunolasun {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Точки / маркеры / индикаторы*/
.kovunegas {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.desanupug, .kovunegas:hover {
  background-color: #717171;
}

/* Затухающая анимация */
.sopuned {
  -webkit-animation-name: sopuned;
  -webkit-animation-duration: 1.5s;
  animation-name: sopuned;
  animation-duration: 1.5s;
}

@-webkit-keyframes sopuned {
  from {opacity: .4}  
  to {opacity: 1}
}

@keyframes sopuned {
  from {opacity: .4}  
  to {opacity: 1}
}

JS

Код
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("cenupugikasop");
  var dots = document.getElementsByClassName("kovunegas");
  if (n > slides.length) {slideIndex = 1}  
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
  slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
  dots[i].className = dots[i].className.replace(" desanupug", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " desanupug";
}

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

Где теперь можно корректно просматривать на любом мобильном носители, типа гаджет, и на самом большом мониторе, во всех моментах все отражается корректно.

Демонстрация
14 Апреля 2019 Загрузок: 2 Просмотров: 2282 Комментариев: (0)

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

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

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

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