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

Великолепный слайдер в адаптивном HTML + CSS

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

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

Установка

Полный код под страницу

HTML, CSS, JS

Код

<!DOCTYPE html>
<html>
  <head>
  <title>Изображения из слайд-шоу</title>
  <style>
  * {box-sizing: border-box}
  body {
  font-family: Verdana, sans-serif;
  margin:0
  }
  .mySlides {display: none}
  img {vertical-align: middle;}
  .slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
  }
  /* Кнопки next & previous */
  .prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  }
  /* Измените положение "next button" */
  .next {
  right: 0;
  border-radius: 3px 0 0 3px;
  }
  /* Добавьте черный фоновый цвет с небольшой прозрачностью */
  .prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
  }
  /* Подпись под изображением */
  .text {
  color: #ffffff;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
  }
  /* Number text (1/3 etc) */
  .numbertext {
  color: #ffffff;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  }
  /* Точки/маркеры/указатели */
  .dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #999999;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  }
  .active, .dot:hover {
  background-color: #111111;
  }
  /* Выцветание анимации */
  .fade {
  -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}
  }
  /* Для маленьких экранов увеличьте размер текста */
  @media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
  }
  </style>
  </head>
  <body>
  <div class="slideshow-container">
  <div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="https://kartinkin.net/pics/uploads/posts/2022-08/thumbs/1659858692_2-kartinkin-net-p-pozitivnie-oboi-na-rabochii-stol-krasivo-2.jpg" style="width:100%">
  <div class="text">Лондон, Англия</div>
  </div>
  <div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="https://cs8.pikabu.ru/post_img/big/2017/03/06/8/1488808137150648634.png" style="width:100%">
  <div class="text">Заход солнца в Румынии</div>
  </div>
  <div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="https://bipbap.ru/wp-content/uploads/2017/04/0_d38e9_93e12641_orig.jpg" style="width:100%">
  <div class="text">Нью-Йорк, США</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>
  <script>
  var slideIndex = 0;
  showSlides();

  function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  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, 2000); // Change image every 2 seconds

  }
  </script>
  </body>
</html>

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

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

03 Декабря 2022 Загрузок: 1 Просмотров: 807 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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