ピックアップ記事など、画像と文章をひとつの記事とした、スライドギャラリーを作りたいと思ったので、何かと便利な「slider.js」をちょこっとカスタマイズしてみました。
1.wex.imより「slider.js」をダウンロード
2.JavaScriptとCSSを読み込む
|
1 2 3 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.slider.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery.slider.css" /> |
3.JavaScriptを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script type="text/javascript"> $(function() { $('#slider').slider({ autoplay: true, //自動再生 showControls: true, //前へ,次へを表示するか showProgress: false, //下部に現在位置を示すナビを表示するか showPosition: false, //何枚目を見ているかを表示 hoverPause: true, //マウスオーバーで停止するか wait: 3000, //停止時間 fade: 300, //フェード時間 direction: 'left', //移動方向 width: 690, //横幅 height: 380, //縦幅 randomize: false, //ランダム表示するか }); }); </script> |
4.HTMLを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div id="slider"> <div class="pickupN"> <p class="pickupT"><img src="images/dish_01.jpg" alt="カレーライス" width="180" height="270" /></p> <ul> <li class="pi_title">1.記事タイトル記事タイトル記事</li> <li class="pi_subtitle">サブタイトルサブタイトルサブタイトルサブタイトルサブタイトルサブタイトルサブタイトルサブタイトル</li> <li class="pi_article">本文をここに記述。本文をここに記述。本文をここに記述。本文をここに記述。本文をここに記述。本文をここに記述。本文をここに記述。本文をここに記述。 本文をここに記述。本文をここに記述。本文をここに記述。本文をここに記述。本文をここに記述。本文をここに記述。本文をここに記述。本文をここに記述。 本文をここに記述。本文をここに記述。本文をここに記述。本文をここに記述。本文をここに記述。本文をここに記述。本文をここに記述。本文をここに記述。 本文をここに記述。本文をここに記述。本文をここに記述。本文をここに記述。本文をここに記述。本文をここに記述。本文をここに記述。本文をここに記述。 本文をここに記述。本文をここに記述。本文をここに記述。本文をここに記述。本文をここに記述。本文をここに記述。本文をここに記述。本文をここに記述。</li> </ul> <p class="continue"><a href="#">続きはこちら</a></p> </div><!--#pickupN end--> </div> |
以上になります。