ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Слайдер на jQuery с адаптивным фоном

Слайдер на jQuery с адаптивным фоном

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

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

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

Проверено на сервис на адаптивность:

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

Здесь пример установочного процесса:

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

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

Установка:

Подключаем библиотеку

Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

HTML

Код
<div class="osnova-slaydera">
  <div class="sucheniyem">
  <div class="adapevenys" data-img="http://zornet.ru/_fr/56/2711828.jpg"></div>
  <div class="adapevenys" data-img="http://zornet.ru/_fr/56/3302384.jpg"></div>
  <div class="adapevenys" data-img="http://zornet.ru/_fr/56/6209632.jpg"></div>
  <div class="adapevenys" data-img="http://zornet.ru/_fr/56/2536118.jpg"></div>
  <div class="adapevenys" data-img="http://zornet.ru/_fr/56/1625717.jpg"></div>
  </div>
  <div class="anemavilos">
  <div class="daptivnem">
  <h3>Слайдер в стильном оформление</h3>
  <p>Также присутствует краткое описание под каждое изображение.</p>
  </div>
  <div class="adnegon">
  <button class="btn-prev" disabled>
  <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
  </button>
  <button class="btn-next">
  <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>  
  </button>
  </div>
  </div>
</div>

CSS

Код
.osnova-slaydera {
  width: 100%;
  height: 485px;
  margin: 0px 0;
  padding: 0;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 15px;
  line-height: 23px;
  color: #4c4c4c;
  position: relative;
}
.sucheniyem {
  position: relative;
  width: 100%;
  height: 100%;
  background: #f3f3f3;
  overflow: hidden;
}
.adapevenys {
  position: absolute;
  width: 100%;
  min-height: 100%;
  top: 0;
  left: 0;
  padding: 20px;
}
.left {
  left: -100%;
}
.right {
  left: 100%;
}
.anemavilos {
  position: absolute;
  width: 70%;
  max-width: 500px;
  bottom: 15%;
  right: 5%;
  pointer-events: none;
}
.daptivnem {
  position: relative;
  padding: 0.5em 2em 1em;
  background: #FFFFFF;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.daptivnem h3 {
  font-size: 1.7em;
  font-weight: normal;
  color: #337AB7;
}
.daptivnem p {
  font-family: Verdana, sans-serif;
}
.anemavilos:before {
  content: "";
  position: absolute;
  width: 65%;
  height: 80%;
  top: 0;
  left: 0;
  transform: translate(-10px, -10px);
  background: #337AB7;
}
.adnegon {
  position: absolute;
  bottom: -50px;
  right: 5%;
  pointer-events: all;
}
.adnegon button {
  transition: ease .4s;
}
.adnegon button svg {
  margin: 10px 0;
}
.adnegon .btn-prev, .adnegon .btn-next {
  width: 58px;
  height: 58px;
  margin-left: 8px;
  border: 2px solid #bad1e4;
  outline: none;
  border-radius: 100px;
  color: #f5f4f4;
  background: #145d9c;
  box-shadow: 0px 0px 15px 2px rgba(35, 35, 35, 0.6);
  cursor: pointer;
}
.adnegon button:hover {
  box-shadow: 0px 3px 30px 3px rgba(0,0,0,.5);
}
.adnegon button:disabled {
  box-shadow: 0px 1px 5px 0px rgba(41, 41, 41, 0.71);
  background: #5fb9ef;
  cursor: default;
}
.optional {
  width: 80%;
  max-width: 680px;
  margin: 6em auto;
  padding: 2em 3em;
  box-shadow:  
  0 3px 12px rgba(4, 4, 4, 0.16),  
  0 3px 12px rgba(4, 4, 4, 0.23);
}
@media (max-width: 620px) {
  body {
  font-size: 13px;
  line-height: 1.5em;
  }
  .anemavilos {
  position: absolute;
  width: 100%;
  max-width: 100%;
  bottom: 0;
  right: 0;
  }
  .daptivnem {
  padding: .5em 1.5em;
  box-shadow: none;
  }
  .adnegon {
  display: none;
  }
}

JS

Код
$(function(){
  var tolerance = 100;
  var speed = 650;
  var interactiveElements = $('input, button, a');
  var itemsLength = $('.adapevenys').length;
  var active = 1;
  for (i=1; i<=itemsLength; i++){
  var $layer = $(".adapevenys:nth-child("+i+")");
  var bgImg = $layer.attr("data-img");
  $layer.css({
  "background": "url("+bgImg+") no-repeat center / cover"
  });
  };
  setTimeout(function() {
  $(".adapevenys").css({
  "transition": "cubic-bezier(.4,.95,.5,1.5) "+speed+"ms"
  });
  }, 200);
  $(".adapevenys:not(:first)").addClass("right");
  function sucheniyemScreen() {
  $('.sucheniyem').on('mousedown touchstart', function(e) {
   
  var touch = e.originalEvent.touches;
  var start = touch ? touch[0].pageX : e.pageX;
  var difference;
  $(this).on('mousemove touchmove', function(e) {
  var contact = e.originalEvent.touches,
  end = contact ? contact[0].pageX : e.pageX;
  difference = end-start;
  });
  $(window).one('mouseup touchend', function(e) {
  e.preventDefault();
  // Переход вправо:
  if (active < itemsLength && difference < -tolerance) {
  $(".adapevenys:nth-child("+active+")").addClass("left");
  $(".adapevenys:nth-child("+(active+1)+")").removeClass("right");
  active += 1;
  btnDisable();
  };
  // Переход влево:
  if (active > 1 && difference > tolerance) {
  $(".adapevenys:nth-child("+(active-1)+")").removeClass("left");
  $(".adapevenys:nth-child("+active+")").addClass("right");
  active -= 1;
  btnDisable();
  };
  $('.sucheniyem').off('mousemove touchmove');
  });
  });
  };
  sucheniyemScreen();
  interactiveElements.on('touchstart touchend touchup', function(e) {
  e.stopPropagation();
  });
  // Кнопки:
  $(".btn-prev").click(function(){
  // Переход влево:
  if (active > 1) {
  $(".adapevenys:nth-child("+(active-1)+")").removeClass("left");
  $(".adapevenys:nth-child("+active+")").addClass("right");
  active -= 1;
  btnDisable();
  };
  });
  $(".btn-next").click(function(){
  // Переход вправо:
  if (active < itemsLength) {
  $(".adapevenys:nth-child("+active+")").addClass("left");
  $(".adapevenys:nth-child("+(active+1)+")").removeClass("right");
  active += 1;
  btnDisable();
  };
  });
  function btnDisable() {
  if (active >= itemsLength) {
  $(".btn-next").prop("disabled", true);
  $(".btn-prev").prop("disabled", false);
  }
  else if (active <= 1) {
  $(".btn-prev").prop("disabled", true);
  $(".btn-next").prop("disabled", false);
  }
  else {
  $(".btn-prev, .btn-next").prop("disabled", false);
  };
  };
});

А так все сделано не так сложно, если брать основу стилистики, которая полностью прописана в закрепленном CSS. Здесь веб-разработчик самостоятельно меняет палитру цветов, которое полностью идет в закрепленном CSS.

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

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

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

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

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

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