自作のスライダーを作成したので、自分へのメモ。今更JQueryかよって思うかもしれませんが、手軽にパパッと作りたかったのでJqueryで作りました。
誰もが思うような、自動のスライダーというよりも、リスト化されたものの中から１つを選んで見れるような手動の形のものです。ただsetTimeOutとかを使えば自動に改造することができると思います。是非参考にしてください。
今回の用途としては、例えばホームページがあって、画像や動画の作品集か何かを紹介するみたいな想定です。縦長なページで画像や動画を配置してもいいのですがなんかそれだけだと素気ない感じだったので、横に動く様なものを作ってみました。
環境
・JQuery
・bootstrap4
・FontAwesome
・HTML/CSS
ちなみにJSのAPIやBootstrapにもスライダーありますが、どれも既存のデザインを変えるのが少し手間なので自作にした経緯もあります。自作でもそんな難しくはないのでメンテのし易さを考えたら自作の方がいいかなと思います。
index.html
<!doctype html><htmllang="ja"><head><!-- Required meta tags --><metacharset="utf-8"><!-- for responsive --><metaname="viewport"content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"><!-- Bootstrap CSS --><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"crossorigin="anonymous"><!-- Fontawesome CSS --><linkhref="https://use.fontawesome.com/releases/v5.8.2/css/all.css"rel="stylesheet"><!-- General css --><linkrel="stylesheet"href="css/reset.css"><linkrel="stylesheet"href="css/style.css"><!-- Optional JavaScript --><!-- jQuery first, then Popper.js, then Bootstrap JS --><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"crossorigin="anonymous"></script><!-- General css --><script src="js/main.js"></script><title>Simple Html App</title></head><body><main><divclass="main2 bg-dark my-5"><divclass="main2__slider w-100 h-100"><divclass="main2__slider--item item1 fromtItem"><imgsrc="image/image_1.jpeg"alt=""></div><divclass="main2__slider--item item2 bgItem bgItem--right"><imgsrc="image/image_2.jpeg"alt=""></div><divclass="main2__slider--item item3 bgItem"><imgsrc="image/image_3.jpeg"alt=""></div><divclass="main2__slider--item item4 bgItem bgItem--left"><imgsrc="image/image_4.jpeg"alt=""></div><divclass="main1__slider--chevron chevronRight"><iclass="fas fa-chevron-circle-right text-white h1 px-1"></i></div><divclass="main1__slider--chevron chevronLeft"><iclass="fas fa-chevron-circle-left text-white h1 px-1"></i></div></div></div></main></body></html>基本Bootstrapのスターターテンプレートです。ありがたいことに、これでJQueryも使える様になります。
※fontawesomeはアカウント作成しCDNを取得しないといけません。
reset.cssを使っています。調べればたくさんあるので自身で好きなものを使用してください。
css/style.css
.main2{width:100vw;height:330px;}.main2__slider{position:relative;}.main2__slider--item{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:0.3s;}.main2__slider--item>img{width:500px;height:300px;}.fromtItem{z-index:100;}.bgItem{z-index:99;opacity:0.5;}.bgItem--left{left:0;transform:translate(0,-50%)scale(0.8,0.8);}.bgItem--right{left:100%;transform:translate(-100%,-50%)scale(0.8,0.8);}.main1__slider--chevron{height:300px;line-height:300px;z-index:101;}.main1__slider--chevron.chevronRight{background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,0.8));position:absolute;top:50%;right:50%;transform:translate(250px,-50%);}.main1__slider--chevron.chevronLeft{background:linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,0.8));position:absolute;top:50%;left:50%;transform:translate(-250px,-50%);}.main1__slider--chevron>i{opacity:0.9;}ここは特に言うことないです。
js/main.js
$(function(){// 自作スライダー。バックグラウンドのアイテムを少し見せてフロントアイテムが少し浮いているように見せる。varchevronRight=$(".chevronRight");varchevronLeft=$(".chevronLeft");varmaximunItem="item"+$(".main2__slider--item").length;varfromtItem;varbgItem_right;varbgItem_right_classNmae;varbgItem_left;varbgItem_left_classNmae;chevronRight.click(function(){fromtItem=$(".fromtItem")bgItem_right=$(".bgItem--right");bgItem_left=$(".bgItem--left");bgItem_left_classNmae=bgItem_left.attr("class").split(/\s+/)[1];/*
スライダーの方向は右回りなので、frontItem→bgItem--right、bgItem--right→隠れ要素、
隠れ要素→bgItem--left、bgItem--left→fromtItemとなる。
*/fromtItem.removeClass("fromtItem").addClass("bgItem bgItem--right");bgItem_right.removeClass("bgItem--right")bgItem_left.removeClass("bgItem bgItem--left").addClass("fromtItem");/*
現bgItem--leftのitem"nn"によって次のbgItem--leftを特定している。
ただし現bgItem--leftがitem1だった場合は計算式に当てはまらないが、
一番数字の大きいitem"nn"と決まっているのでifで分岐させる。
*/if(bgItem_left_classNmae=="item1"){$(".main2__slider").children("."+maximunItem).addClass("bgItem--left");return;}$(".main2__slider").children(".item"+(Number(bgItem_left_classNmae.replace("item",""))-1)).addClass("bgItem--left");})// 周り方が逆なだけで、基本的には同じような仕組み。chevronLeft.click(function(){fromtItem=$(".fromtItem")bgItem_right=$(".bgItem--right");bgItem_right_classNmae=bgItem_right.attr("class").split(/\s+/)[1];bgItem_left=$(".bgItem--left");fromtItem.removeClass("fromtItem").addClass("bgItem bgItem--left");bgItem_right.removeClass("bgItem bgItem--right").addClass("fromtItem");bgItem_left.removeClass("bgItem--left");if(bgItem_right_classNmae=="item4"){$(".main2__slider").children(".item1").addClass("bgItem--right");return;}$(".main2__slider").children(".item"+(Number(bgItem_right_classNmae.replace("item",""))+1)).addClass("bgItem--right");})})コメントを見て頂ければなんとなく使用がわかると思います。「左・メイン・右・隠し要素」の順に並んでいて、当てるCSSによって、前面に見えたり、左右にずれたりしてます。あとは押したアイコンによってそれぞれ要素に当てるCSSを削除追加してスライドしてる様に見せる仕組みです。
まとめ
ざっくりとした説明で申し訳ありませんが、大体こんな感じです。ただ今回本当に思いつくまま書いてみたのでプロの方からするとダメ出したくさんあると思います。勉強します。
以上です。最後までありがとうございました。