Swiper.jsで縦にスライドするスライドを作ってみた💻
さいしょに
お久しぶりにブログを更新しようと思います。
今日はSwiper.jsで縦にスライドするスライドについてまとめていこうと思います。
スライドを縦にする
画像が縦にスライドするようになっています。縦のスライドは横のスライドと違って違う難しさがあると思い挑戦しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swiper.jsでスライドを作ってみた</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="flex justify-center items-center min-h-screen">
<div class="swiper mx-auto w-4/5 h-[800px]">
<div class="swiper-wrapper">
<div class="swiper-slide flex justify-center items-center">
<img src="./image/thumbnail_image01.png" alt="スライド画像1" width="802" height="602"
class="w-full h-full aspect-[3/2] object-contain">
</div>
<div class="swiper-slide flex justify-center items-center">
<img src="./image/thumbnail_image02.png" alt="スライド画像2" width="802" height="602"
class="w-full h-full aspect-[3/2] object-contain">
</div>
<div class="swiper-slide flex justify-center items-center">
<img src="./image/thumbnail_image03.png" alt="スライド画像3" width="802" height="602"
class="w-full h-full aspect-[3/2] object-contain">
</div>
<div class="swiper-slide flex justify-center items-center">
<img src="./image/thumbnail_image04.png" alt="スライド画像4" width="802" height="602"
class="w-full h-full aspect-[3/2] object-contain">
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.swiper', {
loop: true,
direction: 'vertical',
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true,
},
navigation: {
prevEl: '.swiper-button-prev',
nextEl: '.swiper-button-next',
},
});
</script>
</body>
</html>
※今回は画像のみの表示となっています。
さいごに
今回はSwiper.jsで縦のスライドをコーディングしました。ページネーションの位置やナビゲーションの位置を確認しながらコーディングするのが難しかったです。
これからもSwiper.jsで色々なスライドの作成をしていこうと思います。
