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

Адаптивный слайдер сайта с прокруткой

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

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

А это зависит от того, что сам установит веб-разработчик, если это интернет магазин, то здесь можно выставлять самые обновленные продукты, которые идут под разное направление. Или фирменные вещи, которые постоянно актуальны.

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

Все проверено, где вы аналогично можете все изначально посмотреть на demo:

Если рассматривать с главного изображение, то этот уже ближе идет к планшету:

Легкие и красивые адаптивные слайдеры для сайта

А здесь сразу просматриваем вид на телефонном аппарате:

Слайдер карусель для сайта

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

Этот слайдер работает с подключенной библиотекой.

Код

HTML

Код

CSS

Код

#konstruktor-slaydera{
  max-width:800px;
  margin: 0 auto;
  margin-top: 0px;
}

#prokhodnoy-slayd {
  width: 100%;
  display: table;
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

#slayden-karusel{
  position: relative;
  width: calc(100% * 4);
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
  -webkit-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}

.perevozchik{
  width: calc(100%/4);
  list-style: none;
  display: inline;
  float: left;
}

.perevozchik img {
  width:100%;
}

.Pervin-Kadr{
  margin-top:10px;
  text-align:center;
}

.Pervin-Kadr .vanudus-nedreamel {
  margin:2px;
  display:inline-block;
  width:16px;
  height:16px;
  overflow:hidden;
  text-indent:-9999px;
  background:url(http://zornet.ru/CSS-ZORNET/Abvan/numerdigsa/dekangan/desanued.png) center bottom no-repeat;
}

.Pervin-Kadr .vanudus-nedreamel:hover {
  cursor:pointer;
  background-position:center center;
}

.Pervin-Kadr .vanudus-nedreamel.active {
  background-position:center top;
}

#prewbutton, #nextbutton {
  display:block;
  width:40px;
  height:100%;
  position:absolute;
  top:0;
  overflow:hidden;
  text-indent:-999px;
  background: url("http://zornet.ru/CSS-ZORNET/Abvan/numerdigsa/dekangan/desanued.png") left center no-repeat;
  opacity:0.5;
  z-index:3;
  outline:none !important;
}

#prewbutton {
  left:10px;
}

#nextbutton {
  right:10px;
  background:url(http://zornet.ru/CSS-ZORNET/Abvan/numerdigsa/dekangan/desanued.png) right center no-repeat;
}

#prewbutton:hover, #nextbutton:hover {
  opacity:1;
}

Код

$(document).ready(function () {

var timeList = 700;
var TimeView = 5000;
var RadioBut = true;

var slideNum = 1;
var slideTime;
slideCount = $("#slayden-karusel .perevozchik").length;

var animSlide = function(arrow){
  clearTimeout(slideTime);

  if(arrow == "next"){
  if(slideNum == slideCount) { slideNum=1; }
  else{slideNum++}
  translateWidth = -$('#prokhodnoy-slayd').width() * (slideNum - 1);
  $('#slayden-karusel').css({'transform': 'translate(' + translateWidth + 'px, 0)'});
  }
  else if(arrow == "prew")
  {
  if(slideNum == 1) { slideNum=slideCount; }
  else{slideNum-=1}
  translateWidth = -$('#prokhodnoy-slayd').width() * (slideNum - 1);
  $('#slayden-karusel').css({'transform': 'translate(' + translateWidth + 'px, 0)'});
  }else{
  slideNum = arrow;
  translateWidth = -$('#prokhodnoy-slayd').width() * (slideNum -1);
  $('#slayden-karusel').css({'transform': 'translate(' + translateWidth + 'px, 0)'});
  }

  $(".vanudus-nedreamel.active").removeClass("active");
  $('.vanudus-nedreamel').eq(slideNum - 1).addClass('active');
}

  if(RadioBut){
  var $linkArrow = $('<a id="prewbutton" href="#"><</a><a id="nextbutton" href="#">></a>')
  .prependTo('#prokhodnoy-slayd');
  $('#nextbutton').click(function(){
  animSlide("next");
  return false;
  })
  $('#prewbutton').click(function(){
  animSlide("prew");
  return false;
  })
  }
  var adderSpan = '';
  $('.perevozchik').each(function(index) {
  adderSpan += '<span class = "vanudus-nedreamel">' + index + '</span>';
  });
  $('<div class ="Pervin-Kadr">' + adderSpan +'</div>').appendTo('#konstruktor-slaydera');
  $(".vanudus-nedreamel:first").addClass("active");
  $('.vanudus-nedreamel').click(function(){
  var goToNum = parseFloat($(this).text());
  animSlide(goToNum + 1);
  });
  var pause = false;
  var rotator = function(){
  if(!pause){slideTime = setTimeout(function(){animSlide('next')}, TimeView);}
  }
  $('#konstruktor-slaydera').hover(
  function(){clearTimeout(slideTime); pause = true;},
  function(){pause = false; rotator();
  });

  var clicking = false;
  var prevX;
  $('.perevozchik').mousedown(function(e){
  clicking = true;
  prevX = e.clientX;
  });

  $('.perevozchik').mouseup(function() {
  clicking = false;
  });

  $(document).mouseup(function(){
  clicking = false;
  });

  $('.perevozchik').mousemove(function(e){
  if(clicking == true)
  {
  if(e.clientX < prevX) { animSlide("next"); clearTimeout(slideTime); }
  if(e.clientX > prevX) { animSlide("prew"); clearTimeout(slideTime); }
  clicking = false;
  }
  });
  $('.perevozchik').hover().css('cursor', 'pointer');
  rotator();

});

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

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

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

05 Августа 2019 Загрузок: 3 Просмотров: 2019 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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