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

Адаптивный слайдер на чистом javascript

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

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

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

Так смотрится при открытие портала или страницы:

Слайдер на CSS для сайта, который на чистом CSS

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

Слайдер с выводом изображений на CSS

Аналогично, но с меньшим экраном по размеру:

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

Установочный процесс:

HTML

Код
<div class="adaptivn-slayder">
  <div class="parag">
  <img src="http://zornet.ru/_fr/56/9951978.jpg" alt="Первый слайд">
  <div class="beksun-slayda">Ключевой кадр</div>
  </div>

  <div class="parag">
  <img src="http://zornet.ru/_fr/56/5339989.jpg" alt="Второй слайд">
  <div class="beksun-slayda">Название темы</div>
  </div>

  <div class="parag">
  <img src="http://zornet.ru/_fr/56/2373921.jpg" alt="Третий слайд">
  <div class="beksun-slayda">Заголовок слайда</div>
  </div>

  <a class="prev" onclick="minusSlide()">❮</a>
  <a class="next" onclick="plusSlide()">❯</a>
</div>

<div class="uneizmen-akemada">
  <span class="noguma-pomoki-kadra" onclick="currentSlide(1)"></span>  
  <span class="noguma-pomoki-kadra" onclick="currentSlide(2)"></span>  
  <span class="noguma-pomoki-kadra" onclick="currentSlide(3)"></span>  
</div>

CSS

Код
.adaptivn-slayder{
  max-width: 90%;
  position: relative;
  margin: auto;
  height: 300px;
  margin-bottom: 15px;
}

.adaptivn-slayder .parag img {
  object-fit: cover;
  width: 100%;
  height: 300px;
  border: none !important;
  box-shadow: none !important;
}

.adaptivn-slayder .prev, .adaptivn-slayder .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: 0.6s ease;
  border-radius: 0 3px 3px 0;
}
.adaptivn-slayder .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.adaptivn-slayder .prev:hover,
.adaptivn-slayder .next:hover {
  background-color: rgba(25, 24, 24, 0.8);
}

.beksun-slayda{
  position: absolute;
  color: #f4f4f7;
  font-size: 35px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 1px 1px 1px #141415, 0 0 1em #141415;
}

.uneizmen-akemada {
  text-align: center;
}
.noguma-pomoki-kadra{
  cursor: pointer;
  height: 12px;
  width: 12px;
  margin: 0 2px;
  background-color: #ddd;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.deystvuyus,
.noguma-pomoki-kadra:hover {
  background-color: #aaa;
}

.adaptivn-slayder .parag {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
@-webkit-keyframes fade {
  from {
  opacity: .4
  }
  to {
  opacity: 1
  }
}
@keyframes fade {
  from {
  opacity: .4
  }
  to {
  opacity: 1
  }
}

JS

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

function plusSlide() {
  showSlides(slideIndex += 1);
}

function minusSlide() {
  showSlides(slideIndex -= 1);  
}

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

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("parag");
  var dots = document.getElementsByClassName("noguma-pomoki-kadra");
  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("deystvuyus", "");
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " deystvuyus";
}

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

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

Демонстрация
21 Августа 2019 Загрузок: 6 Просмотров: 10991 Комментариев: (11)
Поделиться в социальных сетях

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

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

Комментарии: 11
knave93
knave93 12 Марта 2020 04:261
0
возможно ли как-то на этом слайдере включить автопролистывание слайдов?
Kosten
Kosten 12 Марта 2020 05:052
0
Это простой слайдер, который выстроен на чистом javascript без использования сторонних библиотек. Если нужен слайдер карусель, то в поиске забейте на сайте "Слайдер карусель" и найдете автопрокрутку или карусель.

Как пример недавно размещенный слайдер с автор прокруткой.
knave93
knave93 12 Марта 2020 12:293
+1
благодарю! Очень помогает ваш сайт!
-SAM-
-SAM- 27 Апреля 2021 05:197
0
Чтобы была автопрокрутка, то дописываем скрипт:
Код
$(function() {
 var interval = setInterval(function(){
  $(".next").click();
 }, 5000); //задержка в миллисекундах
 $(".noguma-pomoki-kadra, .prev").click(function(){
  clearInterval(interval); //остановка
 });
});
Или вот еще такой можно использовать.
Chiffa
Chiffa 05 Апреля 2020 13:454
0
Добрый день.
Как добавить два таких слайдера на страницу?
Менять название классов? Или возможно есть более простое решение?
Сопрано
Сопрано 05 Апреля 2020 14:485
0
Попробуйте взять с демонстраций код с стили, так как там совершенно другие классы, и попробуйте установить, и посмотрите будет конфликтовать, только после установки кэш браузера почистите.
Kosten
Kosten 05 Апреля 2020 19:006
0
Также можно стили расположить файл, по идее не должны друг друга напрягать.

Копируем стили в тестовый документ и создаем файл под ссылку, где далее устанавливаем HEAD.

Код
<link rel="stylesheet" href="ВАША ССЫЛКА.css">


или в CSS

Код
@import url(ВАША ССЫЛКА.css);
genremontulcraft
genremontulcraft 13 Июля 2021 17:498
0
Что изменить или добавить, прокручивался справа на лево?
Kosten
Kosten 13 Июля 2021 22:4910
0
Так эта функция присутствует, обновил demo страницу, где по сторонам кнопки установлены, что вправо прокручивать, и аналогично в другую сторону.
genremontulcraft
genremontulcraft 13 Июля 2021 17:519
0
как расположить кнопки друг от друга?
Kosten
Kosten 13 Июля 2021 22:5111
0
А для чего они друг другу, ведь для этого есть нижнее переключатели, они установлены друг другу. А их количество будет зависит от слайдов, это если к примеру 5 изображений в слайде, так и аналогично кнопки по числу идут.
Войдите:
avatar