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

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

Простой в горизонтальном виде адаптивный слайдер изображений для сайта, который создан на CSS и чистом JavaScript, где идут стрелки по сторонам. В мануале представлен установочный обзор по работе слайдера slick. Что отлично смотрится на всех мобильных аппаратах, так как под все гаджет в стилях выстроены настройки. Если рассматривать его на большом экране, то здесь мы видим слайдер в горизонтальном положение, плюс он еще на автомате перелистывает слайды.

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

Так он выглядит при завершение установочного процесса:

Горизонтальный слайдер для сайта на HTML+CSS

Установка:

HEAD

Код

HTML

Код

CSS

Код

.osnovaniye {
  height: 100%;
  padding: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 767px) {
  .osnovaniye {
  padding: 50px 10px;
  }
}

.slick-slider {
  min-width: 0;
}

.slick-list {
  overflow: hidden;
}

.slick-track {
  display: flex;
  align-items: flex-start;
}

.slider {
  position: relative;
  padding: 0px 60px;
}

@media (max-width: 767px) {
  .slider {
  padding: 0px 40px;
  }
}

.slider .slick-arrow {
  position: absolute;
  top: 50%;
  margin: -20px 0px 0px 0px;
  z-index: 10;
  font-size: 0;
  width: 30px;
  height: 30px;
}
.slider .slick-arrow.slick-prev {
  left: 0;
  background: url("http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/long-arrow-left.png") 0
  0 / 100% no-repeat;
}
.slider .slick-arrow.slick-next {
  right: 0;
  background: url("http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/long-arrow-right.png") 0 0 / 100% no-repeat;
}
.slider .slick-arrow.slick-disabled {
  opacity: 0.2;
}

.moving_slayda {
  padding: 0px 15px;
}
.moving_slayda img {
  max-width: 100%;
height: 278px;
}

Код

$(document).ready(function() {
  $(".slider").slick({
  arrows: true,
  dots: false,
  slidesToShow: 3,
  autoplay: true,
  speed: 900,
  autoplaySpeed: 700,
  responsive: [
  {
  breakpoint: 768,
  settings: {
  slidesToShow: 2
  }
  },
  {
  breakpoint: 550,
  settings: {
  slidesToShow: 1
  }
  }
  ]
  });
});

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

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

09 Апреля 2020 Загрузок: 3 Просмотров: 5566 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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