カルーセルjQueryプラグイン（フクロウカルーセル2）

ダウンロードします。https：//owlcarousel2.github.io/OwlCarousel2/

参考資料：のhttp：//www.htmleaf.com/jQuery/Slideshow-Scroller/201502161387.html

 

CSSは導入しました：

<リンクのrel = "スタイルシート" のhref = "owlcarousel / owl.theme.default.min.css">   

 

JS尾はjquery.jsとowl.carousel.min.jsファイルを追加します。

<スクリプトSRC = "owlcarousel / owl.carousel.min.js"> </ SCRIPT> 

 

 

HTMLの例：

< DIV クラス= "OWL-カルーセルOWL-テーマ" > 
    < DIV クラス= "項目" > < H4 > 1 </ H4 > </ DIV > 
    < DIV クラス= "項目" > < H4 > 2 </ H4 > < / DIV > 
    < DIV クラス= "項目" > < H4 > 3 </ H4 > </ DIV > 
    < DIV クラス= "項目"> < H4 > 4 </H4 > </ DIV > 
    < DIV クラス= "項目" > < H4 > 5 </ H4 > </ DIV > 
    < DIV クラス= "項目" > < H4 > 6 </ H4 > </ DIV > 
    < DIV クラス= "項目" > < H4 > 7 </ H4 > </ DIV > 
    < DIV クラス= "項目" > < H4 >8 </ H4 > </ divの> 
    < DIV クラス= "項目" > < H4 > 9 </ H4 > </ DIV > 
    < DIV クラス= "項目" > < H4 > 10 </ H4 > </ DIV > 
    < DIV クラス= "項目" > < H4 > 11 </ H4 > </ DIV > 
    < DIV クラス= "項目" > < H4 > 12 </ H4 > </ DIV > 
</ DIV>

 

JS例：

$（ドキュメント）.ready（関数（）{
     / * * 
     * OWL-カルーセル
     * / 
    VARの OWL = $（ 'OWL-カルーセル。' ）; 
    owl.owlCarousel（{ 
        アイテム： 4。 、画面//回転に見トロイの木馬エントリの
        ループ：trueに無限ループするかどうか、最初と最後の項目のコピーが無限ループのような錯覚を作成する//、
        マージン： 10 、// 10pxの間隔写真
        自動再生を：trueにするかどうか、//カルーセル自動再生
        autoplayTimeout： 3000 //カルーセル自動再生間隔
        autoplayHoverPause：trueに、//は、ロールオーバー自動再生中に停止される
        ドット：ドット//偽表示ナビゲーションボタンを
    }）; 
}）;

 

（公式サイトから、私のJS構成、ドットとナビゲーション矢印に従って除去）エフェクトリファレンス：

 

 

 

　　　　　　　　　　　　　　　　　　　　次の表は、すべての組み込みフクロウカルーセルパラメータオプションであります：

 

 

パラメーター名	パラメータタイプ	デフォルト値	説明
アイテム	型：Number	デフォルト：3	可視スクリーンカルーセル項目に
マージン	型：Number	デフォルト：0	ピクセル単位のマージン右値カルーセル項目
ループ	型：Boolean	デフォルト：false	無限ループかどうかは、最初と最後のコピーが無限ループの錯覚を作成します
センター	型：Boolean	デフォルト：false	カルーセル項目が中心。あなたは、奇数と偶数の項目でうまく動作することができます
mouseDrag	型：Boolean	デフォルト：true	私はドラッグアンドドロップするマウスを使用することができます
touchDrag	型：Boolean	デフォルト：true	私はドラッグに触れることができます
pullDrag	型：Boolean	デフォルト：true	ステージは、エッジに引き出します。
無料プレゼンテーション	型：Boolean	デフォルト：false	エッジへのアイテムのプル
配置パディング	型：Number	デフォルト：0	右ステージ上パディング左とパディング（隣接するエントリを参照してください）
マージ	型：Boolean	デフォルト：false	カルーセルのアイテムをマージします。データマージ=「{数}」内部アイテムを探して..
mergeFit	型：Boolean	デフォルト：true	画面には、カルーセルの項目よりも小さい場合には、メリーゴー項目が画面に合わせ
autoWidth	型：Boolean	デフォルト：false	非メッシュ内容を設定します。divに使用してみてくださいwidthスタイル
開始位置	タイプ：数値/文字列	デフォルト：0	「＃のID」：など、開始またはURLのハッシュ文字列
URLhashListener	型：Boolean	デフォルト：false	URLハッシュの変化を監視します。メリーゴー長期に設定する必要がありますdata-hashプロパティ
ではありません	型：Boolean	デフォルト：false	表示EXT /前のボタン
navRewind	型：Boolean	デフォルト：true	前のまたは次にジャンプ
navText	型：Array	デフォルト：[「次へ」または「前へ」]	HTMLのナビゲーション矢印
slideBy	タイプ：数値/文字列	デフォルト：1	Xによるナビゲーションスライド。「ページ」の文字列は、ページ単位でスライドするように設定することができます。
ドット	型：Boolean	デフォルト：true	显示圆点导航按钮
dotsEach	Type: Number/Boolean	Default: false	每多少个项显示一个圆点导航按钮
dotData	Type: Boolean	Default: false	使用data-dot的内容
lazyLoad	Type: Boolean	Default: false	是否懒加载图片。data-src和data-src-retina为高分辨率。如果元素不是<img>会设置为元素的内联背景图像。
lazyContent	Type: Boolean	Default: false	lazyContent选项只在测试版中有，发行版中已经被删除。
autoplay	Type: Boolean	Default: false	旋转木马是否自动播放
autoplayTimeout	Type: Number	Default: 5000	旋转木马自动播放的时间间隔
autoplayHoverPause	Type: Boolean	Default: false	是否在鼠标滑过时停止自动播放
smartSpeed	Type: Number	Default: 250	速度计算
fluidSpeed	Type: Boolean	Default: Number	速度计算
autoplaySpeed	Type: Number/Boolean	Default: false	旋转木马自动播放的速度
navSpeed	Type: Number/Boolean	Default: false	旋转木马导航的速度
dotsSpeed	Type: Boolean	Default: Number/Boolean	分页的速度
dragEndSpeed	Type: Number/Boolean	Default: false	Drag end speed
callbacks	Type: Boolean	Default: true	是否允许回调函数
responsive	Type: Object	Default: empty object	包含responsive选项的对象。设置为flase取消responsive能力。
responsiveRefreshRate	Type: Number	Default: 200	Responsive的刷新频率
responsiveBaseElement	Type: DOM element	Default: window	可以设置在任何DOM元素上。如果你关心不支持响应式的浏览器（如IE8），可以在包裹容器中使用该属性。
responsiveClass	Type: Boolean	Default: false	可选的辅助class。添加owl-reponsive-和breakpoint class到主元素上。可以在给定breakpoint的元素上设置内容样式。
video	Type: Boolean	Default: false	是否允许添加YouTube/Vimeo视频。
videoHeight	Type: Number/Boolean	Default: false	设置视频的高度。
videoWidth	Type: Number/Boolean	Default: false	设置视频的宽度。
animateOut	Type: String/Bolean	Default: false	CSS3 animation out.
animateIn	Type: String/Bolean	Default: false	CSS3 animation in.
fallbackEasing	Type: String	Default: swing	Easing for CSS2 $.animate.
info	Type: Function	Default: false	获取基本信息的回调函数(当前的 item/pages/widths) 。Info函数的第二个参数是Owl DOM元素的对象引用。
nestedItemSelector	Type: String/Class	Default: false	当owl元素嵌套在某些很深的DOM结构中时使用该参数。在class名字前面不要使用.号。
itemElement	Type: String	Default: div	owl-item的DOM元素类型。
stageElement	Type: String	Default: div	owl-stage.的DOM元素类型。
navContainer	Type: String/Class/ID/Bolean	Default: false	设置自定义的导航容器class
dotsContainer	Type: String/Class/ID/Bolean	Default: false	设置自定义的导航容器class