画像をスライドさせたい
山崎講師swiperというJavaScriptのライブラリを使用することで簡単にスライドショーを作成することができます。
<!DOCTYPE html>
<html>
<head>
<title>swiper.html</title>
<meta charset="UTF-8">
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>
<style>
.swiper {
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="https://picsum.photos/id/237/600/300"></div>
<div class="swiper-slide"><img src="https://picsum.photos/id/238//600/300"></div>
<div class="swiper-slide"><img src="https://picsum.photos/id/239//600/300"></div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<!--<div class="swiper-scrollbar"></div>-->
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script>
// Swiperインスタンスを作成します
const swiper = new Swiper('.swiper', {
// スライドの方向を指定します。ここでは'horizontal'を指定して水平にスライドするように設定します。
direction: 'horizontal',
// スライドのループ機能を有効にします。これにより最後のスライドの次は最初のスライドに戻ります。
loop: true,
// ページネーションを追加する場合の設定をします。ページネーションとは現在のスライドの位置を示すインジケータのことです。
pagination: {
// ページネーションとして動作させる要素を指定します。ここでは'.swiper-pagination'クラスを持つ要素がページネーションとして働きます。
el: '.swiper-pagination',
},
// ナビゲーション（次/前へボタン）を追加する場合の設定をします。
navigation: {
// "次へ"ボタンとして動作させる要素を指定します。ここでは'.swiper-button-next'クラスを持つ要素が"次へ"ボタンとして働きます。
nextEl: '.swiper-button-next',
// "前へ"ボタンとして動作させる要素を指定します。ここでは'.swiper-button-prev'クラスを持つ要素が"前へ"ボタンとして働きます。
prevEl: '.swiper-button-prev',
},
// スクロールバーを追加する場合の設定をします。
scrollbar: {
// スクロールバーとして動作させる要素を指定します。ここでは'.swiper-scrollbar'クラスを持つ要素がスクロールバーとして働きます。
el: '.swiper-scrollbar',
},
});
</script>
</body>
</html>
