ZorNet.Ru — сайт для вебмастера » HTML и CSS » Адаптивный слайдер типа карусели в CSS + JS

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

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

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

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

Так будет смотреться на мобильном носителях:

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

HTML

Код

CSS

Код

.astenti-onlopas img{
animation-name: astenti-onlopas;
animation-duration: 1.6s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

@keyframes astenti-onlopas{
from{
transform: rotate(0deg);
}

to{
transform: rotate(360deg);
}
}

.deservesegra{
position:absolute;
}

.deservesegra .i{
position:absolute;
cursor:pointer;
}

.deservesegra .i .b{
fill:#000;
fill-opacity:0.5;
stroke:#fff;
stroke-width:1200;
stroke-miterlimit:10;
stroke-opacity:0.3;
}

.deservesegra .i:hover .b{
fill:#fff;
fill-opacity:.7;
stroke:#000;
stroke-opacity:.5;
}

.deservesegra .iav .b{
fill:#fff;
stroke:#000;
fill-opacity:1;
}

.deservesegra .i.idn{
opacity:.3;
}

.mergechniqus{
display:block;
position:absolute;
cursor:pointer;
}

.mergechniqus .a{
fill:none;
stroke:#fff;
stroke-width:360;
stroke-miterlimit:10;
}

.mergechniqus:hover{
opacity:.8;
}

.mergechniqus.mergechniqusdn{
opacity:.5;
}

.mergechniqus.mergechniqusds{
opacity:.3;
pointer-events:none;
}

Код

jQuery(document).ready(function ($) {

  var options = {
  $FillMode: 2,
  $AutoPlay: 1,
  $Idle: 4000,
  $PauseOnHover: 1,

  $ArrowKeyNavigation: 1,
  $SlideEasing: $Jease$.$OutQuint,
  $SlideDuration: 800,
  $MinDragOffsetToSlide: 20,
  $SlideSpacing: 0,
  $UISearchMode: 1,
  $PlayOrientation: 1,
  $DragOrientation: 1,

  $BulletNavigatorOptions: {
  $Class: $JssorBulletNavigator$,
  $ChanceToShow: 2,
  $SpacingX: 8,
  $Orientation: 1
  },

  $ArrowNavigatorOptions: {
  $Class: $JssorArrowNavigator$,
  $ChanceToShow: 2
  }
  };

  var jssor_slider1 = new $JssorSlider$("gtenupoxsa_kisenum", options);

  function ScaleSlider() {
  var bodyWidth = document.body.clientWidth;
  if (bodyWidth)
  jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 1920));
  else
  window.setTimeout(ScaleSlider, 30);
  }
  ScaleSlider();

  $(window).bind("load", ScaleSlider);
  $(window).bind("resize", ScaleSlider);
  $(window).bind("orientationchange", ScaleSlider);
  });

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

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

13 Октября 2018 Просмотров: 1458 Комментариев: (0)

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

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

Kosten

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