Lightslider - モバイル touch_html/css_WEB-ITnose をサポートする軽量の jQuery スライドショー プラグイン

簡単なチュートリアル

lightslider は、軽量で応答性の高い jQuery スライドショー プラグインです。 Lightslider スライドショー プラグインは、モバイル タッチ デバイスをサポートしており、サムネイルまたは無限ループのカルーセルを含むコンテンツ スライドショーを作成できます。また、次のような特徴もあります:

• 完全にレスポンシブなデザインで、あらゆるデバイスに自動的に適応します。
• 各ブレークポイントは個別に設定できます。
• ギャラリーモードでサムネイル付きのスライドショーを作成できます。
• 携帯電話でのスワイプとタッチドラッグをサポートします。
• スライドは動的に追加または削除できます。
• ファイルサイズは小さく、テーマは豊富で、実装は簡単です。
• CSS トランジション効果を使用し、CSS トランジション効果をサポートしていないブラウザでは jQuery を使用してフォールバックします。
• 豊富なコールバック関数とパブリック メソッドを提供します。
• 自動再生モードと無限ループのカルーセル モードを提供します。
• キーボード、矢印、ドットナビゲーションをサポートします。
• クロスブラウザーとクロスデバイス: Chrome、Safari、Firefox、Opera、IE7+、IOS、Android、Windows Phone。
• 同じページ上に複数のスライドショー インスタンスを生成できます。
• スライドショーのコンテンツは写真、ビデオなどです。

デモを見る プラグインをダウンロード

インストール

スライドショー プラグインは、npm または bower を通じてインストールできます。

$ bower install lightslider$ npm install lightslider

または、圧縮パッケージをダウンロードして、次のファイルをページに導入します。

<link type="text/css" rel="stylesheet" href="css/lightslider.css" /><script src="js/jquery.min.js"></script><script src="js/lightslider.js"></script>

使用法

HTML構造

lightsliderスライドショーの基本的なHTML構造は次のとおりです:

<ul id="light-slider">    <li>        <h3>First Slide</h3>        <p>Lorem ipsum Cupidatat quis pariatur anim.</p>    </li>    <li>        <h3>Second Slide</h3>        <p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>    </li>    ...</ul>

初期化プラグイン

ページDOM要素がロードされた後、lightSliderを通じてスライドショープラグインを初期化できます。 （） 方法。

<script type="text/javascript">    $(document).ready(function() {        $("#light-slider").lightSlider();    });</script>

設定パラメータ

このスライドショー プラグインで使用できる設定パラメータは次のとおりです:

3サムネイル間のスペース currentPagerPosition string 'middle'サムネイルの位置は次のとおりです: 'left'、'middle'、'right'enableTouchbooleantrueモバイルタッチがサポートされているかどうか有効化D ragbooleantrueデスクトップデバイスでマウスドラッグを使用してスライドを切り替えることをサポートするかどうかfreeMovebooleantrueスワイプまたはドラッグ中にスライドの自由な移動を許可するかどうかれsponsiveobjectnull各ブレークポイントを個別に設定

パラメータ	タイプ	デフォルト値	説明
項目	番号	3	同時に表示されるスライドの数
autoWidth	boolean	false	カスタマイズ各スライドの幅
slideMove	number	1	同時に移動するスライドの数
slideMargin	number	10	各スライド間の間隔
addClass	string	''	スライドにクラスを追加します
mode	string	'slide'	アニメーショントランジションのタイプ、「スライド」または「フェード」です
useCSS	ブール値	true	trueはCSSアニメーショントランジション効果を使用することを意味し、falseはjQueryアニメーショントランジション効果を使用することを意味します
cssEasing	string	'ease'	CSSトランジションアニメーションで使用されるイージング効果
緩和	string	'linear'	jQuery 遷移アニメーションで使用されるイージング効果
speed	number	400	遷移アニメーションの継続時間 (ミリ秒)
auto	ブール値	false	true に設定すると、スライドショーが自動的に再生されます
pauseOnHover	boolean	false	マウスがロールオーバーすると自動再生を停止します
loop	boolean	false	false は、最後のフレーム 再生するために先頭にジャンプしません
slideEndAnimation	bolean	true	Allow slideEnd anime
pause	number	2000	2つのトランジションアニメーション
キーを押す間の間隔	boolean	false	キーボードナビゲーションを許可するかどうか
controls	boolean	true	falseに設定すると、前/次ボタンは表示されません
prevHtml	文字列	''	前ボタンの HTML をカスタマイズします
nextHtml	string	''	次へボタンの HTML をカスタマイズします
rtl	boolean	false	右から方向を変えてください左へ
adaptiveHeight	boolean	false	各スライドの高さに基づいてスライドの高さを動的に調整します
vertical	boolean	false	縦型スライドショー効果を作成する
verticalHeight	number	500	垂直スライドモードでのスライドの高さを設定します(スライドの数が1より大きい場合)
vThumbWidth	number	100	垂直方向のサムネイルの幅スライドモード
thumbItem	number	10	同時に表示されるサムネイルの数
pager	boolean	true	ドットナビゲーションを有効にするかどうか
ギャラリー	ブール	true	サムネイルを有効にするかどうか スライドショー モード
galleryMargin	number	5	ギャラリーとスライドの間のスペース
thumbMargin	number

コールバック関数

onBeforeNext の前に実行されますスライドエル毎回「次へ」スライド遷移アニメーションが実行される前にトリガーされますonBeforePrevSlideelすべての「Prev」スライド遷移アニメーションは実行前にトリガーされます

コールバック関数	パラメータ	説明
onBeforeStart	el	スライドの読み込み開始時に起動
on SliderLoad	el	スライドがロードされた直後に実行
onBeforeSlide	el	各スライド遷移アニメーションは
onAfterSlide	el

パブリック メソッド