最初に行うことは、idではなくクラスのカルーセルのマークアップです。そのため、ページで同じモジュールを何度も使用でき、特異性は3次ではありませんでした。
HTML
<div class="wrap"> <div class="b-carousel js-carousel"> <button class="b-carousel__prev js-carousel__prev">Prev</button> <button class="b-carousel__next js-carousel__next">Next</button> <div class="b-carousel__wrap js-carousel__wrap"> <div class="b-carousel__item"> <img src="..." alt="" class="b-carousel__img"> </div> <div class="b-carousel__item"> <img src="..." alt="" class="b-carousel__img"> </div> <div class="b-carousel__item"> <img src="..." alt="" class="b-carousel__img"> </div> <div class="b-carousel__item"> <img src="..." alt="" class="b-carousel__img"> </div> </div> </div> </div>
私たちが持っています：
- ブロック-フレームから出てくるすべてを隠すカルーセルのラッパー。
- スライド自体のコンテナは、フレックスボックスを使用してライン上に配置され、余裕があります。
- 境界線からはみ出すすべてのものを隠すスライドのブロック。
- ブロック-画像を垂直に揃えるヘルパー。 そして、その中にはすでに写真があります。
CSSでは、グローバルエリアを詰まらせないため、BEM通知を使用します。 少し適応させましょう。
CSS
.b-carousel { width: 100%; overflow: hidden; position: relative; box-sizing: border-box; border: 1px solid; } .b-carousel__prev, .b-carousel__next { position: absolute; top: 50%; left: 20px; width: 50px; height: 50px; background: #fff; transform: translateY(-50%) translateZ(0); cursor: pointer; text-indent: 100%; white-space: nowrap; overflow: hidden; z-index: 3; } .b-carousel__next { left: auto; right: 20px; } .b-carousel__wrap { display: flex; transition: transform .5s; will-change: transform; position: relative; z-index: 1; height: 100%; } .b-carousel__item { flex: 0 0 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; } .b-carousel__img { width: 100%; display: block; }
Transform：コントロール用のtranslateZ（0）-別の複合レイヤーに配置するためのハック。これにより、スライドでコンテナーを移動するときに、ボタンが再描画されなくなります。 そして、ラッパーはプロパティを変更します。 これはブラウザ用であるため、ブロックでいくつかのアクションが発生することがわかります。
コードを書き始めましょう。 パラメーターを持つオブジェクトを受け取る関数を作成しましょう：
function Carousel(setting) { /* Scope privates methods and properties */ let privates = {}; /* Privates properties */ privates.setting = setting; privates.sel = { "main": document.querySelector(privates.setting.main), "wrap": document.querySelector(privates.setting.wrap), "children": document.querySelector(privates.setting.wrap).children, "prev": document.querySelector(privates.setting.prev), "next": document.querySelector(privates.setting.next) }; privates.opt = { "position": 0, "max_position": document.querySelector(privates.setting.wrap).children.length }; // Control if(privates.sel.prev !== null) { privates.sel.prev.addEventListener('click', () => { this.prev_slide(); }); } if(privates.sel.next !== null) { privates.sel.next.addEventListener('click', () => { this.next_slide(); }); } }
カルーセル管理方法：
/* Public methods */ // Prev slide this.prev_slide = () => { --privates.opt.position; if(privates.opt.position < 0) { privates.sel.wrap.classList.add('s-notransition'); privates.opt.position = privates.opt.max_position - 1; } privates.sel.wrap.style["transform"] = `translateX(-${privates.opt.position}00%)`; }; // Next slide this.next_slide = () => { ++privates.opt.position; if(privates.opt.position >= privates.opt.max_position) { privates.opt.position = 0; } privates.sel.wrap.style["transform"] = `translateX(-${privates.opt.position}00%)`; };
next_slideメソッドとprev_slideメソッドは、トランスフォームを使用してラッパーを移動するため、ブロックの再描画は行われず、GPUでアニメーションが発生します。
カルーセルの作成：
new Carousel({ "main": ".js-carousel", "wrap": ".js-carousel__wrap", "prev": ".js-carousel__prev", "next": ".js-carousel__next" });
IEのサポートが必要な場合は、矢印関数を次のように置き換えます。
以上です！ 少ないコード-少ないトラフィック（jQuery 3.2〜85kB）。 パラメーターを制御し、ページ上で数回使用できます。
デモ：
記事が気に入ったら、すぐにループアニメーション、タッチイベント、その他のおいしいグッズの続編が登場します！