jquery商品スライダーの設置方法
今日のjqueryの設置方法は、「商品スライダー」です。
今回使った「Owl Carousel」は、軽量でさまざまな機能に対応
あなたのホームページにも活用してみてね!
<
1.ファイルをダウンロード
下記、サイトよりダウンロードします
OWL Carousel
https://owlcarousel2.github.io/OwlCarousel2/
「owl-carousel」フォルダにある
・owl.carousel.css
・owl.theme.css
・owl.carousel.js
上記、3点を保存して下さい
2.ファイルの読み込み
1.で保存したファイルをhead内で読み込み
※注意
owl.carousel.jsは、必ずjquery.jsの後に記述!!
jqueryは、http://jquery.com/からダウンロード
3.HTMLへの記述
見本の画像サイズは150pxです
4.javascriptプラグインを記述
$(document).ready(function(){ $('#slider1').owlCarousel({ items : 6,//並べる個数 slideSpeed : 300,// paginationSpeed : 800,// autoPlay: 2000,//スライドするスピード 1000/1秒 }); });見本と同じ内容になっています
あと、最後に商品スライダーの幅がデフォルトのままだと
広かったので、見本では幅が狭くなっています!
「owl.carousel.css」の中の
/* display none until init */
.owl-carousel{
display: none;
position: relative;
width:900px;
-ms-touch-action: pan-y;
}
100%から900pxに変更しています♪
以上、これだけで完成♪
関連ニュース
・HTML・CSSの基礎
・jqueryとは
・CSSで透明度設定