Share this post on:

Как создать слайдер, карусель на сайте ?

Сегодня мы создадим простой слайдер. Для этого будем использовать библиотеку Swiper.js. Первое, что нужно сделать — это подключить JS библиотеку.

<!-- Подключаем базовые стили -->
<link
 rel="stylesheet"
 href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
/> 
<!-- Подключаем саму библиотеку -->
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

После того, как подключили swiper, необходимо создать html структуру.

<div class="swiper">

  <div class="swiper-wrapper">
    <!-- Слайды -->
    <div class="swiper-slide">
       <img src="https://sun9-40.userapi.com/sun9-25/impf/c849536/v849536880/419d0/ITlQLecQ_T0.jpg?size=604x377&quality=96&sign=47f8cc2461a8ce17c994d23ef250e10f&type=album">
    </div>
     <div class="swiper-slide">
       <img src="https://sun9-40.userapi.com/sun9-25/impf/c849536/v849536880/419d0/ITlQLecQ_T0.jpg?size=604x377&quality=96&sign=47f8cc2461a8ce17c994d23ef250e10f&type=album">
    </div>
     <div class="swiper-slide">
       <img src="https://sun9-40.userapi.com/sun9-25/impf/c849536/v849536880/419d0/ITlQLecQ_T0.jpg?size=604x377&quality=96&sign=47f8cc2461a8ce17c994d23ef250e10f&type=album">
    </div>

  </div>

</div>

Для примера я добавил в слайдер несколько картинок. Теперь настроим наш слайдер. Открываем тег <script> и помещаем туда необходимые настройки (смотрите ниже).

<script>
//Обращаемся к нашему слайдеру(к самому родительскому классу)
const swiper = new Swiper('.swiper', {
    loop: true,
   slidesPerView:2 //количество слайдов на страннице
});
</script>

И так соберем весь код вместе.

<!DOCTYPE html>
<html lang="ru">
<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">
   <!-- Подключаем базовые стили -->
   <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/> 
   <!-- Подключаем саму библиотеку -->
   <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
   <title>Document</title>
</head>
<body>
   <div class="swiper">
      <div class="swiper-wrapper">
        <!-- Слайды -->
        <div class="swiper-slide">
           <img src="https://sun9-40.userapi.com/sun9-25/impf/c849536/v849536880/419d0/ITlQLecQ_T0.jpg?size=604x377&quality=96&sign=47f8cc2461a8ce17c994d23ef250e10f&type=album">
        </div>
        <div class="swiper-slide">
           <img src="https://sun9-40.userapi.com/sun9-25/impf/c849536/v849536880/419d0/ITlQLecQ_T0.jpg?size=604x377&quality=96&sign=47f8cc2461a8ce17c994d23ef250e10f&type=album">
        </div>
        <div class="swiper-slide">
           <img src="https://sun9-40.userapi.com/sun9-25/impf/c849536/v849536880/419d0/ITlQLecQ_T0.jpg?size=604x377&quality=96&sign=47f8cc2461a8ce17c994d23ef250e10f&type=album">
        </div>
      </div>
  </div>
<script>
//Обращаемся к нашему слайдеру(к самому родительскому классу)
const swiper = new Swiper('.swiper', {
    loop: true,
   slidesPerView:2 //количество слайдов на страннице
});
</script>
</body>
</html>

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

Share this post on:

Leave a Comment

Ваш адрес email не будет опубликован.