progway — программирование, IT

Библиотечка swiper.js

Чисто случайно я всё больше и больше стал заниматься JavaScript'ом, так что сегодня хочу рассказать об одной библиотечке, с которой столкнулся. Недавно встала необходимость сделать адаптивный слайдер на сайте, а изобретать велосипед не было никакого желания. Тогда я сел в ваши вот эти интернеты и увидел там swiper.js - библиотека, которая позволяет создать и тонко настроить слайдер любой сложности.

Импортировать библиотеку в проект можно с cdn:

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

Далее быстро напишем скелет нашего слайдера:

<button class="swiper-button-next"></button>
<button class="swiper-button-prev"></button>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide card"></div>
        <div class="swiper-slide card"></div>
    </div>
</div>

Тут класс div.card отвечает за одну картинку в слайдере, а button элементы - за кнопки перемотки.

Теперь напишем скрипт самого слайдера и так же подключим его. У меня он выглядит так:

const slider = document.querySelector('.swiper-container');

let mySwiper = new Swiper(slider, {
    slidesPerView: 1,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    loop: true,
    autoplay: {
        delay: 5000,
    }
})

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

#web #useful

🆒1

www.tgoop.com/prog_way_blog/43

260 viewsOct 2, 2020 at 11:59

Библиотечка swiper.js

Чисто случайно я всё больше и больше стал заниматься JavaScript'ом, так что сегодня хочу рассказать об одной библиотечке, с которой столкнулся. Недавно встала необходимость сделать адаптивный слайдер на сайте, а изобретать велосипед не было никакого желания. Тогда я сел в ваши вот эти интернеты и увидел там swiper.js - библиотека, которая позволяет создать и тонко настроить слайдер любой сложности.

Импортировать библиотеку в проект можно с cdn:

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<button class="swiper-button-next"></button>
<button class="swiper-button-prev"></button>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide card"></div>
        <div class="swiper-slide card"></div>
    </div>
</div>

const slider = document.querySelector('.swiper-container');

let mySwiper = new Swiper(slider, {
    slidesPerView: 1,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    loop: true,
    autoplay: {
        delay: 5000,
    }
})

BY progway — программирование, IT