ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Слайдер адаптивный на JavaScript и CSS3

Слайдер адаптивный на JavaScript и CSS3

Слайдер адаптивный на JavaScript и CSS3
Простой адаптивный слайдер, где присутствует функция карусели, что самостоятельно перелистывает картинки, и корректно смотрится на устройстве. Так что такой стиль дизайна можно задействовать в шапке тематического ресурса, где выставить самый актуальный материал или новость. Ведь он идет на автоматическую ширину, это на 100%, где просто становится резиновым. Но главное не портит изображение на любом мобильном устройстве, во общем на небольших экранах.

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

Проверка на адаптивность:

Красивый слайдер карусель для сайта на чистом CSS3

Установка:

HTML

Код
<div class="gnuican-amoun">
  <div class="usinesadeg kunasages">
  <div class="usmakeng-nasagen">1 / 3</div>
  <img src="http://zornet.ru/_fr/56/9069623.jpg" style="width:100%">
  <div class="necesa-leaves">Первый слайд</div>
  </div>

  <div class="usinesadeg kunasages">
  <div class="usmakeng-nasagen">2 / 3</div>
  <img src="http://zornet.ru/_fr/56/3142865.jpg" style="width:100%">
  <div class="necesa-leaves">Второй слайд</div>
  </div>

  <div class="usinesadeg kunasages">
  <div class="usmakeng-nasagen">3 / 3</div>
  <img src="http://zornet.ru/_fr/56/8474462.jpg" style="width:100%">
  <div class="necesa-leaves">Третий слайд</div>
  </div>

  <a class="prev" onclick="plusSlides(-1)">❮</a>
  <a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>

<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span>  
  <span class="dot" onclick="currentSlide(2)"></span>  
  <span class="dot" onclick="currentSlide(3)"></span>  
</div>

CSS

Код
/* Slideshow container */
.gnuican-amoun {
  max-width: 100%;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 0;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 1s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption necesa-leaves */
.necesa-leaves {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  necesa-leaves-align: center;
}

/* Number necesa-leaves (1/3 etc) */
.usmakeng-nasagen {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.kunasages {
  -webkit-animation-name: kunasages;
  -webkit-animation-duration: 1.5s;
  animation-name: kunasages;
  animation-duration: 1.5s;
}

@-webkit-keyframes kunasages {
  from {opacity: .4}  
  to {opacity: 1}
}

@keyframes kunasages {
  from {opacity: .4}  
  to {opacity: 1}
}

JS

Код
var slideIndex = 0;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("usinesadeg");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}  
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
  slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
  dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("usinesadeg");
  for (i = 0; i < slides.length; i++) {
  slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex> slides.length) {slideIndex = 1}  
  slides[slideIndex-1].style.display = "block";  
  setTimeout(showSlides, 10000); // Change image every 2 seconds
}

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

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

Демонстрация
2020-06-09 Загрузок: 1 Просмотров: 282 Комментарий: (0)

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

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

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

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