川口・さいたまのホームページ製作 川口・さいたまのホームページ制作会社関東ダイイチへ問い合わせる 埼玉県川口市のホームページ制作会社関東ダイイチへ電話する さいたま・川口のホームページ制作会社関東ダイイチへメールする



jquery商品スライダーの設置方法|さいたま・川口の低価格なホームページ制作会社
TOPダイイチウェブニュース>商品スライダー

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





ホームページ制作の料金|川口WEB会社HP制作の製作実績|川口のホームページ制作会社HP制作会社の関東ダイイチ|会社案内ウェブ制作のさいたま|関東ダイイチ|問い合わせ
Copyright © 2014 web no daiichi All Rights Reserved.  
>TOP >ホームページの必要性 >料金
>ご注文から公開まで >お問い合わせ >制作実績
>会社案内 >ダイイチニュース  >リンク
ホームページ制作|埼玉県川口市西川口2-10-1
川口・さいたまのWEB制作