【無料】スライドバナーを作ってみよう！
記事IT・テクノロジー
ヘッダーなどに、「画像が切り替わって表示されるスライダー」があると目を惹きますよね！今回はSwiperという人気のスライダープラグインを使って作っていきたいと思います。
フォルダを用意する
今回はswiperというフォルダで進めていきます。
画像を2枚以上用意する
swiperフォルダの中にimgフォルダを作ってその中に、同じサイズの画像を2枚以上入れます。名前はここではbanner01.jpgとbanner02.jpgとしておきます。
index.htmlを作る
下記コードをまるっとコピペして、index.htmlという名前で保存します。これもswiperフォルダに入れます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>swiper</title>
<link rel="stylesheet" href="https: //cdn.jsdelivr.net/npm/swiperあっと9/swiper-bundle.min.css">
<script src="https: //cdn.jsdelivr.net/npm/swiperあっと9/swiper-bundle.min.js"></script>
</head>
<body>
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="img/banner01.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/banner02.jpg" alt=""></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>
<style>
img {
width: 100%;
}
:root {
--swiper-navigation-color: #fff;
--swiper-pagination-color: #fff;
}
</style>
<script>
var swiper = new Swiper('.swiper', {
speed: 1800,
loop: true, //最後に達したら先頭に戻る
effect: 'fade',
fadeEffect: {
crossFade: true
},
autoplay: { //自動再生を有効に
delay: 2500,
},
//ページネーション表示の設定
pagination: {
el: '.swiper-pagination', //ページネーションの要素
type: 'bullets', //ページネーションの種類
clickable: true, //クリックに反応させる
},
//ナビゲーションボタン（矢印）表示の設定
navigation: {
nextEl: '.swiper-button-next', //「次へボタン」要素の指定
prevEl: '.swiper-button-prev', //「前へボタン」要素の指定
},
//スクロールバー表示の設定
scrollbar: {
el: '.swiper-scrollbar', //要素の指定
},
});
</script>
</body>
</html>
＊
①https:の後のスペースは詰めて下さい。（2ヶ所）
②あっとはアットマークに書き換えて下さい。（2ヶ所）
▼headタグ内
▼以上で完成！
index.htmlをダブルクリックして、ブラウザ（Google ChromeとかFirefoxとか）で確認してみてくださいね！
▼出来上がり見本
【おまけ】画像をクリックしたら別のページに飛ばしたい場合
下記のような感じで、imgタグをaタグで囲みます。
<div class="swiper-slide"><a href="★画像をクリックしたら飛ぶページのURL★"><img src="img/banner01.jpg" alt=""></a></div>
▼こんな感じ
簡単に出来ましたか？
やるのが面倒くさい。レスポンシブで対応してほしいなどありましたら、下記サービスをご検討いただけたら嬉しいです。😉
でも自分で出来れば頼む必要はありません。😊👍
今回は以上です。
お疲れ様でした⭐️
