今回は企業ホームページなどでよく見かける画像ループスライダーの作り方について紹介していきます。HTMLとCSSだけで実現可能ですので、初心者の方でも気軽に取り入れる事が出来ると思います。
今回作るもの
画像スライドは色々なタイプがありますが、今回はひとりでにずっとスライドし続けているものを作っていきます。
index.html
まずはindex.htmlを作成していきましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>画像ループスライダーサンプル</title>
</head>
<body>
<main>
<div class="slide-wrapper">
<div class="slider">
<!--最初に表示する画像グループ-->
<img src="https://images.pexels.com/photos/716276/pexels-photo-716276.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" srcset="">
<img src="https://images.pexels.com/photos/1709003/pexels-photo-1709003.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" srcset="">
<img src="https://images.pexels.com/photos/2608517/pexels-photo-2608517.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" srcset="">
<img src="https://images.pexels.com/photos/1708988/pexels-photo-1708988.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" srcset="">
<!--ループで表示する画像グループ-->
<img src="https://images.pexels.com/photos/716276/pexels-photo-716276.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" srcset="">
<img src="https://images.pexels.com/photos/1709003/pexels-photo-1709003.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" srcset="">
<img src="https://images.pexels.com/photos/2608517/pexels-photo-2608517.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" srcset="">
<img src="https://images.pexels.com/photos/1708988/pexels-photo-1708988.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" srcset="">
</div>
</div>
</main>
</body>
</html>今回の画像ループスライダーの仕様としては、画面幅いっぱいに4枚の画像を常に表示するような仕組みにします。
それらをループさせたいので4枚1セットの画像グループを2つ用意することになります。
3枚の画像を表示させる場合は合計6枚、5枚の画像を表示させる場合は合計10枚になります。
画像を囲うdiv.sliderクラスの定義と、そのdiv.sliderを囲うdiv.slide-wrapperの定義が重要になります。この2つの表示領域をうまく使うことで、ループスライドを実現することが出来ます。
style.css
続いてstyle.cssを作成していきましょう。
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
main {
padding: 15vw 0;
}
main .slide-wrapper {
width: 100%;
overflow: hidden;
}
main .slide-wrapper .slider {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
width: 100%;
-webkit-animation-name: loop;
animation-name: loop;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
main .slide-wrapper .slider img {
width: 25%;
aspect-ratio: 16/10;
-o-object-fit: cover;
object-fit: cover;
}
/* animation-settings */
@-webkit-keyframes loop {
0% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
100% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@keyframes loop {
0% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
100% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
コードの解説
div.slide-wrapper：スライダー全体を覆い囲む、div.slide-wrapperには画面幅いっぱいのwidthを指定し、overflow:hiddenを設定することで、画面幅からはみ出る領域を非表示にしています。
div.slider：ループスライダーの本体となるdiv.sliderは、画像を横並びにするためにdisplay:flexを指定し、折り返し表示をしないように明示的にflex-wrap:nowrapと定義しています。このdiv.sliderの横幅は画像8枚分の横幅（画面幅2個分）になるのですが、親要素のdiv.slider-wrapperにoverflow:hiddenを適用しているため、横スクロールバーが出たりレイアウト崩れを起こしたりすることなく表示することが出来ます。
img：画面に4枚の画像を表示したいので、1枚あたりの横幅は25％に指定します。それぞれの画像を均一なサイズ感にしたいので、aspect-ratioとobject-fit:coverを組み合わせることで全ての画像サイズを均一にしています。
@keyframes loop：アニメーションの定義部分で、ここではtransform:translateXを使用し、要素を左方向に100％分ズラすアニメーションを定義しています。
アニメーションを定義したら、アニメーションを実行したい要素でアニメーションの呼び出しを行いましょう。animation-name,animarion-iteration-count,animation-duration,animation-timing-funtionの4つのプロパティを定義してアニメーションを呼び出します。
それぞれのプロパティの意味は以下の通りです。
animation-name：定義したアニメーションの名前を設定する。（ここではloop）
animation-iteration-count：アニメーションを何回実行するか定義します。ループさせる場合はinfinityを設定します。
animation-duration：アニメーションの実行時間を定義します。ゆっくりとスライドさせたいので、ここでは20秒を設定しています。
animation-timing-function：アニメーションの実行速度を調整します。等速でアニメーションを実行したい場合はlinearを定義します。他にも最初だけ早くアニメーションを行い、終盤にかけてゆっくり変化するように設定することも出来ます。
動作確認
それぞれのファイルを作成したら実際にブラウザで確認してみましょう、
画像のようにそれぞれの画像がずっとループしていたら成功です！
まとめ
今回は企業ホームページなどでよく見かける画像ループスライダーの作り方について紹介しました。サービス画像や業務風景の写真を掲載しスライド化することで、ホームページを訪れた人がより企業イメージを掴みやすくなったり、信頼感を得やすくなる効果があります。実装も簡単に出来るので、ぜひご活用してみてください！
ZeroStartでは初期費用０円でお客様に合わせたオリジナルテーマを使用したホームページ作成を行っています！ホームページ作成についてご相談がございましたらお気軽にご連絡ください！
