jQuery 「slick.js」をつかってホームページにスライドを設置する

サイトマップ

ホームページとデザインの会社
株式会社ジェイプラン

menu
 
  jQuery 「slick.js」をつかってホームページにスライドを設置する

jQuery 「slick.js」をつかってホームページにスライドを設置する

デモ:http://kenwheeler.github.io/slick/

 

http://kenwheeler.github.io/slick/ のプラグインを使い、ホームページに設置します。

 

設置価格(スライドさせる画像などのコンテンツはご用意ください)

ご自身で設置する場合 無料

会員様 3,000円

非会員様  5,000円

 

ご自身で設置する場合の設置方法

上記サイトよりプラグインをダウンロードし、

使用するページでjqueryとダウンロードしたjsファイルとcssファイルを呼び出します。

<link rel="stylesheet" href="/css/slick.css" media="all">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/js/slick.min.js"></script>

 

スライドさせたい部分に以下HTMLを記入。

スライドさせたいコンテンツを<div></div>の間に入れる

<div class="your-class">
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
</div>

 

デモ:http://kenwheeler.github.io/slick/

を見て、使いたいデモのコードを</body>の前に<script></script>で囲っていれる。

<script type="text/javascript">
    $(document).ready(function(){
      $('.your-class').slick({
		  accessibility:false, //左右のナビゲーションを消す
          dots: false, //スライド下のナビゲーションを消す
		  autoplay:true,//自動再生
  		  infinite: true,//無限ループ
  		  speed: 500,//スライドが切り替わる時間
     	  fade: true,//フェードインでの表示
  		  cssEase: 'linear'//アニメーションの種類(CSS3 その他ease,linear,ease-in,ease-out,ease-in-outがある
      });
    });
</script>

 

印刷はこんなに安かったの?

梅オーナー情報はこちら

おすすめレンタルサーバー

独自SLLが無料!月額100円~使える!使いやすく初心者にお勧め!


ホームページお役立ち情報

記事はありません

お探しの記事は見つかりませんでした。

東京・千葉の中国語教室

中国語教室