Как создать слайдер, карусель на сайте ?
Сегодня мы создадим простой слайдер. Для этого будем использовать библиотеку 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>Вот так быстро мы смогли сделать простого эхо бота, кому была полезна эта информация буду очень благодарен если пожертвуйте на развитие сайта. Спасибо!