スライドショー
-横移動させて全画面で見せる-
See the Pen 6-1-1 横移動させて全画面で見せる by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.
「Result」内の動きを確かめてね!
動きを実現する仕組み
slick というスライドショーを実現するJavaScript ライブラリを使い、HTML 内の<li>にCSS で指定した背景画像をスライドさせる。
※今回は背景画像にしていますが、画像でもスライドは実現できます。
[使用するライブラリ]
* jQuery
* slick(https://kenwheeler.github.io/slick/)
HTMLの書き方
- head終了タグ直前にslickのCSSと自作のCSSの2つを読み込みます。
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"> <link rel="stylesheet" type="text/css" href="css/6-1-1.css"> </head>
- body内のスライドを表示させたい場所にHTMLを記載します。
<ul class="slider"> <li class="slider-item slider-item01"></li> <li class="slider-item slider-item02"></li> <li class="slider-item slider-item03"></li> </ul>
- body 終了タグ直前に jQuery、slick、動きを制御する自作のJS の3 つを読み込みます。
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <!--自作のJS--> <script src="js/6-1-1.js"></script> </body>
自作のCSS内の書き方
/*==================================================
スライダーのためのcss
===================================*/
.slider {
position:relative;
z-index: 1;
/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい(100vh)にする*/
}
/* 背景画像設定 */
.slider-item01 {
background:url(../img/img_01.jpg);
}
.slider-item02 {
background:url(../img/img_02.jpg);
}
.slider-item03 {
background:url(../img/img_03.jpg);
}
.slider-item {
width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい(100%)にする*/
height:100vh;/*各スライダー全体の縦幅を画面の高さいっぱい(100vh)にする*/
background-repeat: no-repeat;/*背景画像をリピートしない*/
background-position: center;/*背景画像の位置を中央に*/
background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}
/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next {
position: absolute;/*絶対配置にする*/
z-index: 3;
top: 42%;
cursor: pointer;/*マウスカーソルを指マークに*/
outline: none;/*クリックをしたら出てくる枠線を消す*/
border-top: 2px solid #ccc;/*矢印の色*/
border-right: 2px solid #ccc;/*矢印の色*/
height: 25px;
width: 25px;
}
.slick-prev {/*戻る矢印の位置と形状*/
left:2.5%;
transform: rotate(-135deg);
}
.slick-next {/*次へ矢印の位置と形状*/
right:2.5%;
transform: rotate(45deg);
}
/*ドットナビゲーションの設定*/
.slick-dots {
position: relative;
z-index: 3;
text-align:center;
margin:-50px 0 0 0;
}
.slick-dots li {
display:inline-block;
margin:0 5px;
}
.slick-dots button {
color: transparent;
outline: none;
width:8px;/*ドットボタンのサイズ*/
height:8px;/*ドットボタンのサイズ*/
display:block;
border-radius:50%;
background:#ccc;/*ドットボタンの色*/
}
.slick-dots .slick-active button{
background:#333;/*ドットボタンの現在地表示の色*/
}
自作のJS内の書き方
$('.slider').slick({
autoplay: true,//自動的に動き出すか。初期値はfalse。
autoplaySpeed: 3000,//次のスライドに切り替わる待ち時間
speed:1000,//スライドの動きのスピード。初期値は300。
infinite: true,//スライドをループさせるかどうか。初期値はtrue。
slidesToShow: 1,//スライドを画面に3枚見せる
slidesToScroll: 1,//1回のスクロールで3枚の写真を移動して見せる
arrows: true,//左右の矢印あり
prevArrow: '<div class="slick-prev"></div>',//矢印部分PreviewのHTMLを変更
nextArrow: '<div class="slick-next"></div>',//矢印部分NextのHTMLを変更
dots: true,//下部ドットナビゲーションの表示
pauseOnFocus: false,//フォーカスで一時停止を無効
pauseOnHover: false,//マウスホバーで一時停止を無効
pauseOnDotsHover: false,//ドットナビゲーションをマウスホバーで一時停止を無効
});
//スマホ用:スライダーをタッチしても止めずにスライドをさせたい場合
$('.slider').on('touchmove', function(event, slick, currentSlide, nextSlide){
$('.slider').slick('slickPlay');
});
この技術を使ったサンプルサイト
バリエーション
を見る
「機能」に関わる
動き一覧
基礎から学びたい方へ
Webサイトの動きを実現する仕組みと
準備について基礎から学びたい方は
下記をまず読み、基本を理解してから
コピペしましょう
Webサイトの動きを
実現する仕組みと準備
書籍情報
紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。
もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!