jQuery スライドショーでプラグイン owlcarousel を使用する (詳細なチュートリアル)

jQuery スライドショー プラグイン owlcarousel は、IE6 以降のすべてのブラウザと互換性のある、小型で強力で互換性の高いスライドショー プラグインです。この記事では主に単語、中国語パラメータ、API 命令の使用方法を紹介します

Owl Carousel は強力で実用的です。 jQuery スライドショー プラグインには次の機能があります:

• すべてのブラウザと互換性があります

• レスポンシブをサポートします

• CSS3 をサポートします

• タッチイベントをサポートします

• カスタムJSON形式

• プログレスバーをサポート

• カスタムイベントをサポート

• 遅延読み込みをサポート

• 適応高さをサポート

ブラウザの互換性: IE6、IE7を含むすべてのブラウザと互換性があります。

jQuery 互換性: バージョン 1.7 以降と互換性があります。

Owl Carouselの使い方:

新しいHTMLファイルを作成します

1. HTMLファイルにOwl Carouselに必要なファイルを導入します

<link href="css/owl.carousel.css" rel="external nofollow" rel="stylesheet">
<link href="css/owl.theme.css" rel="external nofollow" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/owl.carousel.js"></script>

3. JavaScript

<p id="owl-demo" class="owl-carousel">
 <p>1</p>
 <p>2</p>
 <p>3</p>
 <p>4</p>
 <p>5</p>
 <p>6</p>
 <p>7</p>
 <p>8</p>
</p>

中国語版の Owl Carousel パラメータと API の説明:

navigationnavigationTextrewindNavscrollPerPageページネーションページネーション番号応答性応答RefreshRate応答BaseWidthbaseClassthemelazyLoadlazyFollowlazyEffectloopautoHeightjsonPath jsonSuccessdragBeforeAnimFinishマウスドラッグmargintouchDragaddClassActivetransitionStyle

owlcarouselコールバック関数

パラメータ	タイプ	デフォルト値	説明
items	Integer	5	ページごとに表示されるスライドの数
ite msDesktop	array	[1199, 4]	ブラウザの幅と表示されるスライドの数を [X,Y] の形式で設定します。このパラメータは主にレスポンシブ デザインに使用されます。 falseも使用できます
itemsDesktopSmall	Array	[979,3]	同上
itemsTablet	Array	[768,2]	同上
アイテムタブレットS	配列	false	上記と同じ、デフォルトはfalse
itemsMobile	array	[479,1]	上記と同じ
itemsCustom	array	嘘
singleItem	Boolean	false	1つだけを表示するかどうか
itemsScaleUp	Boolean	false
slideSpeed	整数	200	スライドの切り替え速度（ミリ秒）
paginationSpeed	Integer	800	ページング切り替え速度(ミリ秒)
rewindSpeed	Integer	1000	巻き戻し速度(ミリ秒)
autoPlay	boolean/integer	false	自動再生、オプションのブール値または整数 (3000 など) を使用すると、3 秒ごとに切り替わります。true に設定すると、デフォルトで 5 秒ごとに切り替わります
ブール値	false	マウスホバーで自動再生を停止します
boolean	false	「前」、「次」を表示
array	["prev","next"]	前」と「次」のテキスト、デフォルトは ["前"、"次"] です
ブール値	tru​​e	最初のテキストにスライド
ブール値	false	アイテムごとではなくページごとにスクロール
ブール	tru​​e	ページネーションを表示
ブール	false	ページボタン数字を表示します
ブール値	tru​​e
Integer	200	200ミリ秒ごとにウィンドウ幅を検出し、主に応答性のために使用される対応する調整を行います
jクエリセレクター	ウィンドウ
string	owl-carousel	CSSを追加します。必要ない場合は、使用しないことをお勧めします。
string	owl-theme	テーマスタイル。自分で追加できます。要件を満たしてください
Boolean	false	遅延読み込み
Boolean	tru​​e	ページネーションを使用する場合、ページをまたぐ場合、閲覧時にページを飛ばす画像は表示されませんロード済み、 false に設定すると、表示されるページの画像のみが読み込まれます。ページをスキップした画像が読み込まれます。これは、lazyLoad
ブール値/文字列	fade	のサブオプションです。遅延読み込み画像の表示効果は、デフォルトでは 400 ミリ秒です。 false の場合、効果はありません。 used
Boolean	false	無限ループ
Boolean	false	自動使用高さ
文字列	false	JSONファイルパス
関数	false	カスタムJSON形式を処理する関数
Boolean	tru​​e	遷移が完了したかどうかを無視する(ドラッグのみ)
ブール	true	マウスイベントをオフ/オンにする
Integer	0	スライド間隔
Boolean	tru​​e	タッチイベントをオフ/オンにする
ブール値	false	「アクティブ」クラスを表示アイテムに追加
String	false	CSS3トランジション効果を追加

の前にコールバック関数を初期化false 初期化後のコールバック関数 startDraggingfunctionfalseドラッグのコールバック関数afterLazyLoadfunctionfalse遅延読み込み後のコールバック関数

変数	型	デフォルト値	説明
更新前	関数	false	応答後のコールバック関数
afterUpdate	関数	false	コールバック関数への応答 before
beforeInit	function	false
afterInit	function	false	初期化後のコールバック関数
beforeMove	function	false	移動前のコールバック関数
afterMove	function	false	move後のコールバック関数
afterAction	function

owlcarouselカスタムイベント

イベント説明owl.prev前へowl.next次へowl.play自動的に再生するには、再生速度としてパラメータを渡すことができますowl.stop自動再生を停止owl.goTo番号にジャンプowl.jumpToアニメーションなしで番号にジャンプ 以上は皆さんのためにまとめたものです。今後皆さんのお役に立てば幸いです。

関連記事:

node.jsで画像をダウンロードする方法

vueでeventBusを使用してピアコンポーネント間の通信を実現する方法

vue2.0でカスタム円グラフを実装する方法(Echarts)コンポーネント

以上がjQuery スライドショーでプラグイン owlcarousel を使用する (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。