14 окт 2022 в 21:31

Как сделать слайдер на JS?

Ожидает приглашения

Всем привет!

В этой статье ты узнаешь как сделать сенсорный слайдер на HTML, CSS и JavaScript. Помогать в этом нам будет библиотека Swiperjs. Я не считаю себя мастером в JS, всегда есть чему учиться, поэтому если вы знаете как написать какие-то фрагменты кода проще, эффективнее и лучше, то обязательно напишите в комменты.

Первым делом создаем файл index.html и открываем его на редактирование. С начало создаем основную структуру страницы:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Slider</title>
</head>
<body>

</body>
</html>

Далее нужно подключить SwiperJS, для этого переходим в документацию библиотеки - https://swiperjs.com/get-started Чуть ниже заголовка "Use Swiper from CDN" копируем подключения и вставляем между тегами head:

<head>
  <link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
</head>

Затем прописываем div с классом "swiper mySwiper". В нем создаем div c классом "swiper-wrapper" и далее в этом блоке прописываем div c классом "swiper-slide", создадим их 5 штук - Это будут наши слайды, в них я помещу для примера чисто картинки.
Потом в диве с классом "swiper mySwiper" создадим еще один div с классом "swiper-pagination" - это будет пагинация.

Теперь пропишем стрелки, для этого создаем 2 дива. Первая стрелка будет с классом "swiper-button-next", а вторая с "swiper-button-prev". В итоге весь html-код должен выглядеть таким образом:

<div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="https://miro.medium.com/max/1400/1*BR2RiTRoYor9xSrzEgxLWQ.jpeg"></div>
      <div class="swiper-slide"><img src="https://fireseo.ru/wp-content/uploads/2022/06/programming.jpeg"></div>
      <div class="swiper-slide"><img src="https://img.freepik.com/free-vector/neon-lights-background-theme_52683-44625.jpg?w=2000"></div>
      <div class="swiper-slide"><img src="https://png.pngtree.com/thumb_back/fh260/background/20200714/pngtree-modern-double-color-futuristic-neon-background-image_351866.jpg
        "></div>
      <div class="swiper-slide"><img src="https://img.freepik.com/premium-vector/minimalist-shape-background_112769-210.jpg"></div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>

Дальше накинем немного CSS стилей.
Тегам html и body зададим height: 100% и font-size: 15px;
К классу "swiper" пропишем width: 1000px; и height: 100%;
К слайдам зададим следующие стили: text-align: center; font-size: 18px; background-color: #fff; display: flex; justify-content: center; align-items: center;
Еще пропишем к swiper-slide img - width: 58%; и object-fit: cover; - Это размер картинок.

Также немного изменим у стрелок отталкивание от краев:
.swiper-button-next, .swiper-rtl .swiper-button-prev{
right: 140px !important;
left: auto;
}
.swiper-button-prev, .swiper-rtl .swiper-button-next{
left: 140px !important;
right: auto;
}
В итоге у вас должен получится вот такой css-код:

<style>
    html,
    body{
      height: 100%;
      font-size: 15px;
    }
    .swiper{
      width: 1000px;
      height: 100%;
    }
    .swiper-slide{
      text-align: center;
      font-size: 18px;
      background-color: aliceblue;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .swiper-slide img{
      width: 58%;
      object-fit: cover;
    }
    .swiper-button-next, .swiper-rtl .swiper-button-prev{
      right: 140px !important; 
      left: auto;
    }
    .swiper-button-prev, .swiper-rtl .swiper-button-next{
      left: 140px !important; 
      right: auto;
    }

  </style>

Переходим к JavaScript.

Тут код довольно простой:

<script>
    var swiper = new Swiper(".mySwiper", {
      spaceBetween: 30,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      pagination: {
        el: ".swiper-pagination",
      },
      mousewheel: true,
      keyboard: true,
    });
  </script>

То как работает слайдер вы можете посмотреть в моем ролике:

Весь иcходный код вы можете найти в моем GitHub.

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

Хабы: