ホームページのヘッダエリアは、WEBページのファーストビュー領域で、情報量をとにかく詰め込んで見た目も機能も盛り込まなければいけません。
カルーセルというのは、「回転台」や「コンベア」という英単語ですが、WEBページにおいては、横スライドしてバナーを切り替えるamazonなどで使われているバナー機能の事ですね。
左右に移動ボタンが付いているのが特徴ですね。
そして、ちなみに、スマホ画面などで見られる画面右上にある３本線は「ハンバーガーアイコン」っていうらしいので、知らない人は覚えておくように。
swiperの特徴
swiperは、本家サイトから最新版のソースコードをダウンロードしてきて、そのソースコードをサイトにおいてjavascriptで簡単なコードを書くだけで実装できるえらい簡単なOSSです。
http://idangero.us/swiper/
ちなみに、このモジュールを採用したのは、「jQuery」を使わないという事で、非常に軽量であるという事が決め手でした。
本家サイトのトップページにあるデモは、非常に特徴的なカルーセル表示になっていますが、標準的な使い方も十分できるし、マウスドラッグや、スマホでのタッチ操作、ページネーション機能などなど、かなり豊富な機能が盛りだくさんで、そのバリエーションもかなりのボリュームがあるので、リファレンスページを見ると鼻血が出そうになります。
リファレンスページ
今回使ったソースコードを掲載
そして、今回はソースコードをそのまま載せておきますので、使いたい人はまずはコピペでやってみてください。
ダウンロードしたswiperモジュールは"swiper"フォルダでrootに格納してあります。
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>カルーセル</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="icon" type="image/png" href="img/favicon.png">
<link rel='stylesheet' href='swiper/dist/css/swiper.min.css'>
<link rel='stylesheet' href='common.css'>
<script type='text/javascript' src=swiper/dist/js/swiper.min.js'></script>
</head>
<body>
<div class="contents">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" data-slide="1">
<img src="img/001.jpg">
</div>
<div class="swiper-slide" data-slide="2">
<img src="img/002.jpg">
</div>
<div class="swiper-slide" data-slide="3">
<img src="img/003.jpg">
</div>
</div>
<div class="swiper-button swiper-pagination"></div>
<div class="swiper-button swiper-button-prev"></div>
<div class="swiper-button swiper-button-next"></div>
<!-- <div class="swiper-button swiper-scrollbar"></div> -->
</div>
</div>
<script>
var mySwiper = new Swiper('.swiper-container', {
direction : 'horizontal',
height : 300,
touchAngle : 45,
paginationClickable: true,
pagination: {
el: '.swiper-pagination',
clickable : true,
type: 'bullets'
},
speed : 1500,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
parallax : false,
loop : true,
autoplay : true,
themeColor: '#ffffff'
});
// button
document.querySelector(".swiper-button-next").onclick = function(){
mySwiper.slideNext();
};
document.querySelector(".swiper-button-prev").onclick = function(){
mySwiper.slidePrev();
};
</script>
</body>
</html>
.swiper-button{
outline:none;
}
/*next,prevのボタン色を変更する*/
.contents .swiper-button-prev,
.contents .swiper-container-rtl .swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
left: 10px;
right: auto;
}
.contents .swiper-button-next,
.contents .swiper-container-rtl .swiper-button-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
right: 10px;
left: auto;
}
/* pagenation色変更 for bullet */
.contents .swiper-pagination-bullet {
background: #000000;
opacity: 0.7;
}
.contents .swiper-pagination-bullet-active {
opacity: 1;
background: #ffffff;
}
/* for fraction */
.contents .swiper-pagination{
color: #ffffff;
}
暗くて見辛いですが、next,prevボタンとページネーションを表示しています。
解説
ナビゲーションボタン設定がうまく機能せず、
nextButton : '.swiper-button-next',
prevButton : '.swiper-button-prev',
と書いている解説ページが多かったんですが、ボタンが機能しなかったため、"navigation"で記述してあります。
pagenation.typeは"bullets"以外にも多数あって、非常に簡単に設置できるんですが、内包する画像の色味を考えてから配置する必要がありますね。
speedの値を変える事で、カルーセルの切り替わり時間が調整できます。
そしてカルーセルの各コンテンツは、HTMLで中に自由にセットする事ができるため、画像だけの切り替えツールよりは格段にマーケティング情報を載せたりjs連動できたりできるので、非常に便利です。
少しハマったポイントとしては、ページネーションとナビゲーションボタンの色を変更するのに、cssを別途記述しなければいけない点でした、が、慣れるともはや怖いものはありません。
誰でも簡単に高機能なWEBページ作成が可能になるこうしたモジュールは使わないと損ですね！！！
