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

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

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

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

Здесь вы можете посмотреть проверку на различных аппаратах:

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

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

Где по сторонам идут переключатели со стрелками, а также в самом низу находятся точки в зеленом оттенке, что при клике аналогично идет перемотка кадров.

Установка:

HEAD

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

HTML

Код
<div class="sladegas-wanenesa" id="sabolepas">
  <div style="background-image:url(http://zornet.ru/Images/izobrazheniye/zaserymub.jpg)"></div>
  <div style="background-image:url(http://zornet.ru/Images/izobrazheniye/loesabuv.jpg)"></div>
  <div style="background-image:url(http://zornet.ru/_fr/56/0019061.jpg)"></div>
  <div style="background-image:url(http://zornet.ru/_fr/56/3133287.jpg)"></div>
  <div style="background-image:url(http://zornet.ru/_fr/56/3466171.jpg)"></div>
  <!-- Стрелки -->
  <i class="left" class="mesukadka" style="z-index:2; position:absolute;"><svg viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z"></path></svg></i>
  <i class="right" class="mesukadka" style="z-index:2; position:absolute;"><svg viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z" transform="translate(100, 100) rotate(180) "></path></svg></i>
  <!-- заголовок -->
  <span class="opesanea">
  <h1>Здесь можно написать или удалить.</h1>
  </span>
</div>

CSS

Код
.sladegas-wanenesa,  
.sladegas-wanenesa > div {
  background-position: center center;
  display: block;
  width: 100%;
  height: 500px;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #000;
  overflow: hidden;
  -moz-transition: transform .4s;
  -o-transition: transform .4s;
  -webkit-transition: transform .4s;
  transition: transform .4s;
}

.sladegas-wanenesa > div {
  position: absolute;
}

.sladegas-wanenesa > i {
  color: #5bbd72;
  position: absolute;
  font-size: 60px;
  margin: 20px;
  top: 40%;
  text-shadow: 0 10px 2px #223422;
  transition: .3s;
  width: 30px;
  padding: 10px 13px;
  background: #fff;
  background: rgba(255, 255, 255, .3);
  cursor: pointer;
  line-height: 0;
  box-sizing: content-box;
  border-radius: 3px;
  z-index: 4;
}

.sladegas-wanenesa > i svg {
  margin-top: 3px;
}

.sladegas-wanenesa > .left {
  left: -100px;
}
.sladegas-wanenesa > .right {
  right: -100px;
}
.sladegas-wanenesa:hover > .left {
  left: 0;
}
.sladegas-wanenesa:hover > .right {
  right: 0;
}

.sladegas-wanenesa > i:hover {
  background:#fff;
  background: rgba(255, 255, 255, .8);
  transform: translateX(-2px);
}

.sladegas-wanenesa > i.right:hover {
  transform: translateX(2px);
}

.sladegas-wanenesa > i.right:active,
.sladegas-wanenesa > i.left:active {
  transform: translateY(1px);
}

.sladegas-wanenesa:hover > div {
  transform: scale(1.01);
}

.hoverZoomOff:hover > div {
  transform: scale(1);
}

.sladegas-wanenesa > ul {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 4;
  padding: 0;
  margin: 0;
  transform: translateX(-50%);
}

.sladegas-wanenesa > ul > li {
  padding: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  list-style: none;
  float: left;
  margin: 10px 10px 0;
  cursor: pointer;
  border: 1px solid #fff;
  -moz-transition: .3s;
  -o-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s;
}

.sladegas-wanenesa > ul > .showli {
  background-color: #7EC03D;
  -moz-animation: boing .5s forwards;
  -o-animation: boing .5s forwards;
  -webkit-animation: boing .5s forwards;
  animation: boing .5s forwards;
}

.sladegas-wanenesa > ul > li:hover {
  background-color: #7EC03D;
}

.sladegas-wanenesa > .show {
  z-index: 1;
}

.hideDots > ul {
  display: none;
}

.showmesukadka > .left {
  left: 0;
}

.showmesukadka > .right {
  right: 0;
}

.opesanea {
  z-index: 2;
  display: inline-block;
  background: rgba(0,0,0,.5);
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translateY(100%);
  padding: 20px 30px;
  transition: .3s;
  color: #fff;
}

.opesanea * {
  transform: translate(-20px, 30px);
  transition: all 700ms cubic-bezier(0.37, 0.31, 0.2, 0.85) 200ms;
  opacity: 0;
}

.opesaneaTop .opesanea * {
  transform: translate(-20px, -30px);
}

.sladegas-wanenesa:hover .opesanea,
.sladegas-wanenesa:hover .opesanea * {
  transform: translate(0);
  opacity: 1;
}

.opesaneaTop .opesanea {
  top: 0;
  bottom: initial;
  transform: translateY(-100%);
}

.sladegas-wanenesa > div span {
  display: block;
  background: rgba(0,0,0,.5);
  position: absolute;
  bottom: 0;
  color: #fff;
  text-align: center;
  padding: 0;
  width: 100%;
}

@keyframes boing {
  0% {
  transform: scale(1.2);
  }
  40% {
  transform: scale(.6);
  }
  60% {
  transform: scale(1.2);
  }
  80% {
  transform: scale(.8);
  }
  100% {
  transform: scale(1);
  }
}

@media screen and (max-width: 960px) {
  .sladegas-wanenesa > ul > li {
  padding: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin: 5px 5px 0;
  }
}

JS

Код
(function($) {
  "use strict";
  $.fn.sliderResponsive = function(settings) {
   
  var set = $.extend(  
  {
  slidePause: 5000,
  fadeSpeed: 800,
  autoPlay: "on",
  showArrows: "off",  
  hideDots: "off",  
  hoverZoom: "on",
  titleBarTop: "off"
  },
  settings
  );  
   
   
  var $slider = $(this);
  var size = $slider.find("> div").length;  
  var position = 0;  
  var sliderIntervalID;  
   
  $slider.append("<ul></ul>");
  $slider.find("> div").each(function(){
  $slider.find("> ul").append('<li></li>');
  });

  $slider.find("div:first-of-type").addClass("show");
   
  $slider.find("li:first-of-type").addClass("showli")

  $slider.find("> div").not(".show").fadeOut();
   
  if (set.autoPlay === "on") {
  startSlider();  
  }  
   
  if (set.showArrows === "on") {
  $slider.addClass('showArrows');  
  }

  if (set.hideDots === "on") {
  $slider.addClass('hideDots');  
  }

  if (set.hoverZoom === "off") {
  $slider.addClass('hoverZoomOff');  
  }

  if (set.titleBarTop === "on") {
  $slider.addClass('titleBarTop');  
  }

  function startSlider() {
  sliderIntervalID = setInterval(function() {
  nextSlide();
  }, set.slidePause);
  }

  $slider.find("> .right").click(nextSlide)
  $slider.find("> .left").click(prevSlide);

  function nextSlide() {
  position = $slider.find(".show").index() + 1;
  if (position > size - 1) position = 0;
  changeCarousel(position);
  }
   
  function prevSlide() {
  position = $slider.find(".show").index() - 1;
  if (position < 0) position = size - 1;
  changeCarousel(position);
  }

  $slider.find(" > ul > li").click(function() {
  position = $(this).index();
  changeCarousel($(this).index());
  });

  function changeCarousel() {
  $slider.find(".show").removeClass("show").fadeOut();
  $slider
  .find("> div")
  .eq(position)
  .fadeIn(set.fadeSpeed)
  .addClass("show");
  $slider.find("> ul").find(".showli").removeClass("showli");
  $slider.find("> ul > li").eq(position).addClass("showli");
  }

  return $slider;
  };
})(jQuery);

$(document).ready(function() {
   
  $("#sabolepas").sliderResponsive({
  });
});

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

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

Демонстрация
24 Апреля 2020 Загрузок: 5 Просмотров: 1126 Комментариев: (1)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

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

Комментарии: 1
Kosten
Kosten 26 Апреля 2020 18:021
0
Если вам нравится формат, где нет в низу переключателей, а только по сторонам. То рекомендую посмотреть этот слайдер, что аналогичен по конструкции, но только вместо нижнего функционала кнопок, станет выводить ключевые слова на изображение.
Войдите:
avatar