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

Слайдер в адаптивной стиле CSS и JavaScript

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

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

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

Так идет по умолчанию:

Простой слайдер изображений на CSS + JS

Красивый слайдер на CSS для сайта

Установка:

HTML

Код
<div class="oboioska">
  <!-- Первый слайд -->
  <div class="kaderka">
  <img src="Ссылка на изображение #1">
  </div>
   
  <!-- Второй слайд -->
  <div class="kaderka">
  <img src="Ссылка на изображение #2">
  </div>
   
  <!-- Третий слайд -->
  <div class="kaderka">
  <img src="Ссылка на изображение #3">
  </div>
   
  <!-- Кнопки-стрелочки -->
  <a class="previous" onclick="previousSlide()">❮</a>
  <a class="losamub" onclick="losamubSlide()">❯</a>
</div>

CSS

Код
.oboioska{
  max-width: 86%;
  position: relative;
  margin: auto;
  height: 410px;
}

.oboioska .kaderka img {
  object-fit: cover;
  width: 100%;
  height: 410px;
}

.oboioska .previous, .oboioska .losamub {
  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;
}
.oboioska .losamub {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.oboioska .previous:hover,
.oboioska .losamub:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

.oboioska .kaderka {
  animation-name: fade;
  animation-duration: 1.5s;
}
@keyframes fade {
  from {
  opacity: 0.4
  }
  to {
  opacity: 1
  }
}

JS

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

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

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

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

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("kaderka");
   
  if (n > slides.length) {
  slideIndex = 1
  }
  if (n < 1) {
  slideIndex = slides.length
  }
   
  for (let slide of slides) {
  slide.style.display = "none";
  }  
  slides[slideIndex - 1].style.display = "block";  
}

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

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

Демонстрация
2023-01-11 Загрузок: 1 Просмотров: 178 Комментарий: (0)

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

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

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

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