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で透明度設定

OWL Carousel https://owlcarousel2.github.io/OwlCarousel2/

OWL Carousel
https://owlcarousel2.github.io/OwlCarousel2/