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

Адаптивный слайдер сайта на HTML, JS и CSS

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

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

Так смотрится после установки:

Простой слайдер для сайта на чистом JavaScript

Установка:

HTML

Код

<div class="slider">

  
  <div class="item">
  <img src="http://zornet.ru/_fr/91/8048917.jpg">
  </div>

  
  <div class="item">
  <img src="http://zornet.ru/_fr/91/7845961.jpg">
  </div>

  
  <div class="item">
  <img src="http://zornet.ru/_fr/91/0912695.jpg">
  </div>

  
  <a class="previous" onclick="previousSlide()">❮</a>
  <a class="next" onclick="nextSlide()">❯</a>
</div>

CSS

Код

/* Слайдер */
.slider{
  max-width: 90%;
  position: relative;
  margin: auto;
  height: 300px;
}
/* Картинка масштабируется по отношению к родительскому элементу */
.slider .item img {
  object-fit: cover;
  width: 100%;
  height: 300px;
}
/* Кнопки вперед и назад */
.slider .previous, .slider .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 16px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}
.slider .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
/* При наведении на кнопки добавляем фон кнопок */
.slider .previous:hover,
.slider .next:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
/* Анимация слайдов */
.slider .item {
  animation-name: fade;
  animation-duration: 1.5s;
}
@keyframes fade {
  from {
  opacity: 0.4
  }
  to {
  opacity: 1
  }
}

Код

/* Устанавливаем индекс слайда по умолчанию */
let slideIndex = 1;
showSlides(slideIndex);

/* Увеличиваем индекс на 1 — показываем следующий слайд*/
function nextSlide() {
  showSlides(slideIndex += 1);
}

/* Уменьшает индекс на 1 — показываем предыдущий слайд*/
function previousSlide() {
  showSlides(slideIndex -= 1);
}

/* Устанавливаем текущий слайд */
function currentSlide(n) {
  showSlides(slideIndex = n);
}

/* Функция перелистывания */
function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("item");

  if (n > slides.length) {
  slideIndex = 1
  }
  if (n < 1) {
  slideIndex = slides.length
  }

  /* Проходим по каждому слайду в цикле for */
  for (let slide of slides) {
  slide.style.display = "none";
  }
  slides[slideIndex - 1].style.display = "block";
}

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

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

01 Июня 2021 Загрузок: 4 Просмотров: 1948 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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