» »

Адаптивный слайдер Vanilla для сайта

Адаптивный слайдер Vanilla для сайта

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

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

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

Так смотрится на светлом фоне:

Простой слайдер для тематических сайтов

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

HTML

Код
<div class="nukelances_nogunaselym">
  <ul class="ludegoukaicles" id="ludegoukaicles">
  <li><img src="Здесь ссылка на изображение #1.jpg" class="img celopasked" id="1"></li>
  <li><img src="Здесь ссылка на изображение #2.jpg" class="img" id="2"></li>
  <li><img src="Здесь ссылка на изображение #3.jpg" class="img" id="3"></li>
  <button class="kaimendoncleg" id="left">Предыдущая</button>
  <button class="kaimendoncleg" id="right">Следующий</button>
  <button class="kaimendoncleg" id="play">Play</button>
  <button class="kaimendoncleg" id="stop">Stop</button>
  <div style="clear: both"></div>
  </ul>  
  </div>

CSS

Код
.kaimendoncleg {
  border: 1px solid #9a9898;
  border-radius: 35px;
  color: #ececec;
  outline: none;
  background: rgba(48, 48, 49, 0.57);
  transition-duration: 0.40s;
  padding: 9px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  z-index: 999;
}
.kaimendoncleg:hover {
  background: rgba(18, 18, 19, 0.76);
  border: 1px solid #787878;
}
.kaimendoncleg#left {
  left: 0;
}
.kaimendoncleg#right {
  right: 0;
}
.kaimendoncleg#play, .kaimendoncleg#stop {
  top: 0;
  left: 0;
  width: 5%;
  background: rgba(160, 160, 165, 0.44);
  font-size: 13px;
  border: 2px solid rgba(168, 170, 175, 0.8);
}
.kaimendoncleg#stop {
  display: none;
}
.nukelances_nogunaselym {
  position: relative;
}
.ludegoukaicles {
  max-height: 100vh;
  margin: 0;
  padding: 0;  
  overflow-y: hidden;
}
.ludegoukaicles > li {
  float: left;
  list-style: none;
  width: 100%;
}

.ludegoukaicles > li > img {
  display: none;
  transition-duration: 0.35s;
  height: 100vh;
  width: 100vw;
}
.ludegoukaicles > li > img.celopasked {
  display: block;
}

JS

Код
var ludegoukaicles = document.getElementById("ludegoukaicles");
  var ludegoukaiclesChildren = ludegoukaicles.children;
  var btnLeft = document.getElementById("left");
  var btnRight = document.getElementById("right");
  var btnPlay = document.getElementById("play");
  var btnStop = document.getElementById("stop");
  var numberOfImg = document.getElementsByClassName("img").length;
  var interval;

  btnLeft.onclick = prev;
  btnRight.onclick = next;
  btnPlay.onclick = function() {
  btnPlay.style.display = "none";
  btnStop.style.display = "block";
  interval = setInterval(function() {  
  next();  
  }, 3000);
  };
  btnStop.onclick = function() {
  btnPlay.style.display = "block";
  btnStop.style.display = "none";
  clearInterval(interval);
  };

  function next() {
  var current = document.getElementsByClassName("celopasked")[0];
  var id = current.id;
  current.classList.remove("celopasked");
  (id >= numberOfImg) ? id=1: id++;
  document.getElementById(id).classList.add("celopasked");
  }

  function prev() {
  var current = document.getElementsByClassName("celopasked")[0];
  var id = current.id;
  current.classList.remove("celopasked");
  (id-1 < 1) ? id = numberOfImg+1: id=id;
  document.getElementById(id-1).classList.add("celopasked");
  }

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

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

Демонстрация
2019-05-04 Загрузок: 1 Просмотров: 473 Комментарий: (0)

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

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

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