純粋な JavaScript モバイルファーストスライドショーの効果

純粋な JavaScript モバイルファーストスライドショーの効果_JavaScript スキル

WBOY

リリース： 2016-05-16 15:34:09

オリジナル

1573 人が閲覧しました

簡単なチュートリアル
Wallop は、モバイルファーストの純粋な JavaScript スライドショープラグインです。このスライドショープラグインのサイズはわずか 4K で、その原理は HTML 要素に適切なクラスを追加および削除するだけで、これらのクラススタイルを完全にカスタマイズできます。機能は次のとおりです:
モバイルファースト
アニメーションとトランジションの効果は CSS
を使用して生成されます軽量、わずか 4K サイズ
柔軟性と拡張性が高い
カスタマイズ可能なイベントと API
外部依存関係なし

使用方法
このスライドショープラグインを使用するには、まず、wallop.css ファイルと Wallop.min.js ファイルを導入する必要があります。

<link rel="stylesheet" href="path/to/wallop.css">
<script src="path/to/Wallop.min.js"></script>

ログイン後にコピー

HTML 構造

このスライドの基本的な HTML 構造は次のとおりです。最初のスライドに .Wallop-item--current クラスを追加できます。

<div class="Wallop">
 <div class="Wallop-list">
  <div class="Wallop-item">…</div>
  <div class="Wallop-item">…</div>
  <div class="Wallop-item">…</div>
  <div class="Wallop-item">…</div>
  <div class="Wallop-item">…</div>
 </div>
 <button class="Wallop-buttonPrevious">Previous</button>
 <button class="Wallop-buttonNext">Next</button>
</div>

ログイン後にコピー

初期化プラグイン

<script>
 var wallopEl = document.querySelector('.Wallop');
 var slider = new Wallop(wallopEl);
</script>

ログイン後にコピー

アニメーション効果を追加

このスライドショープラグインには、デフォルトではアニメーショントランジション効果がありません。アニメーション効果を追加する必要がある場合は、対応するwallop-animation.css ファイルを導入し、要素に Wallop--xxxx クラスを追加する必要があります。たとえば、フェード効果を追加するには:

<head>
 <link rel="stylesheet" href="path/to/wallop.css">
 <link rel="stylesheet" href="path/to/wallop-fade.css">
</head>        
<div class="Wallop Wallop--fade">
...
</div>

ログイン後にコピー

利用可能なアニメーションの種類

このスライドで使用できるトランジションアニメーションのタイプは次のとおりです:
ワロップ - スライド
ワロップ--フェード
ワロップ -- スケール
ウォロップ -- 回転
ウォロップ--フォールド
Wallop--vertical-slide
上記はいくつかの組み込みのトランジションアニメーションタイプですが、独自のトランジションアニメーションをカスタマイズすることもできます。
設定パラメータ
利用可能な構成パラメータをいくつか示します:
buttonPreviousClass: 'Wallop-buttonPrevious'
buttonNextClass: 'Wallop-buttonNext'
itemClass: 'ワロップアイテム'
currentItemClass: 'Wallop-item--current'
showPreviousClass: 'Wallop-item--showPrevious'
showNextClass: 'Wallop-item--showNext'
HidePreviousClass: 'Wallop-item--hidePrevious'
HideNextClass: 'Wallop-item--hideNext'
カルーセル: true
メソッド
Wallop スライドショープラグインは、ボタンコントロールの基本的なメソッドをいくつか提供します:
goTo

指定したインデックスのスライドにジャンプできます。

var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
 
// 跳转到第二个slide（index从0开始）
Wallop.goTo(1);

ログイン後にコピー

次

次のスライドにジャンプします。

var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
 
// 跳转到下一个slide
Wallop.next();

ログイン後にコピー

前

前のスライドにジャンプします。

var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
 
// 跳转到前一个slide
Wallop.previous();

ログイン後にコピー

イベント
Wallop はスライドが変更されるたびにイベントを発行し、現在のスライドのインデックスと Wallop オブジェクトを含む詳細オブジェクトを返します。

var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
 
Wallop.on('change', function(event) {
 // event.detail.wallopEl
 // => <div class="Wallop">…</div>
 
 // event.detail.currentItemIndex
 // => number
});

ログイン後にコピー

上記は、純粋な JavaScript モバイルファーストのスライドショー効果作成プロセスです。より美しいスライドショー効果を作成するのに役立つことを願っています。