ZorNet.Ru — сайт для вебмастера » HTML и CSS » Простой адаптивный слайдер с помощью jQuery

Простой адаптивный слайдер с помощью jQuery

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

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

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

1. Это снимки с разного размера, все примерно рассчитано, если берем за основу планшет.

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

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

HTML

Код

CSS

Код

#gaseneral-kaudienise {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-color:#000;
  }

#kepepromong {
  position:absolute;
  width:100%;
  height:100%;
  overflow:hidden;
  padding:0px;
  margin:0px;
  }

.godikatamas {
  list-style:none;
  position:absolute;
  width:100%;
  height:100%;
  opacity:1.0;
  background-size:cover;
  background-position:50% 50%;
  transition: all 1s linear; -webkit-transition: all 1s linear;
  }

.mabscripons {
  opacity:0.0;
  visibility:hidden;
  }

.nav {
  position:fixed;
  z-index:99;
  top:50%;
  cursor:pointer;
  color:#fff;
  opacity:0.7;
  transition: all 0.66s ease; -webkit-transition: all 0.66s ease;
  }

.nav:hover { opacity:1.0; }
#levayastorona { left:3%; }
#pravayastorona { right:3%; }

Код

$.global = new Object();
$.global.item = 1;
$.global.total = 0;
$(document).ready(function()
  {
  $("#kepepromong li:nth-child(1)").removeClass('mabscripons');
  var SlideCount = $('#kepepromong li').length;
  $.global.total = SlideCount;
  $('#levayastorona').click(function() { Slide('back'); });
  $('#pravayastorona').click(function() { Slide('forward'); });
  });
function Slide(direction)
  {
  if (direction == 'back') { var $target = $.global.item - 1; }
  if (direction == 'forward') { var $target = $.global.item + 1; }

  if ($target == 0) { DoIt($.global.total); }
  else if ($target > $.global.total) { DoIt(1); }
  else { DoIt($target); }
  }
function DoIt(target)
  {
  $('.godikatamas').addClass('mabscripons');
  $.global.item = target;
  var $newtarget = $("#kepepromong li:nth-child("+target+")");
  $newtarget.removeClass('mabscripons');
  }

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

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

27 Сентября 2018 Просмотров: 1524 Комментариев: (0)

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

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

Kosten

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