レスポンシブ対応 jqueryスライドショーFlexslider 2014年2月20日
Tag:


レスポンシブ対応の軽量なスライドショー

1.サムネイル付スライドショー

Flexsliderの公式サイトより、ファイル一式をダウンロードしてください。
ダウンロードしたフォルダの中のflexslider.cssとjquery.flexslider.jsを使用します。
画像はimagesフォルダに格納します。

jquery.min.jsも必要ですので、http://jquery.com/よりダウンロードしてください。

下記サンプルのパスは環境に合わせて変更してください

サンプルソース

<link rel="stylesheet" href="css/flexslider.css" type="text/css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.flexslider.js"></script>
<script type="text/javascript">
$("document").ready(function(){
  $('.flexslider').flexslider({
    animation: "slide",
    controlNav: "thumbnails"
  });
});
</script>
  
<div class="flexslider">
<ul class="slides">
  <li data-thumb="サムネイル画像URL">
    <img src="画像URL">
  </li>
  <li data-thumb="サムネイル画像URL">
    <img src="画像URL">
  </li>
  <li data-thumb="サムネイル画像URL">
    <img src="画像URL">
  </li>
  <li data-thumb="サムネイル画像URL">
    <img src="画像URL">
  </li>
</ul>
</div>

デモはこちら>>

2.サムネイルなし

サンプルソース

<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.flexslider.js"></script>
<script type="text/javascript">
$("document").ready(function(){
  $('.flexslider').flexslider({
    animation: "fade",          //切り替え動作 fade or slide
    slideshow: true,            //自動実行 true or false
    slideshowSpeed: 5000,  //スライドショーの時間 1000 = 1秒
    animationDuration: 500, //アニメーション時間 1000 = 1秒
    controlNav: true         //ページングナビボタン true or false
  });
});
</script>
  
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="画像URL">
      <p class="flex-caption">画像に関するテキスト</p>
    </li>
    <li>
      <img src="画像URL">
      <p class="flex-caption">画像に関するテキスト</p>
    </li>
    <li>
      <img src="画像URL">
      <p class="flex-caption">画像に関するテキスト</p>
    </li>
    <li>
      <img src="画像URL">
      <p class="flex-caption">画像に関するテキスト</p>
    </li>
    <li>
      <img src="画像URL">
      <p class="flex-caption">画像に関するテキスト</p>
    </li>
  </ul>
</div>


デモはこちら>>

画像に関するテキストがいらない場合は削除してください。サンプルでは削除してあります

animation: “slide”, //切り替え動作 fade or slide
slideshow: true, //自動実行 true or false
slideshowSpeed: 5000, //スライドショーの時間 1000 = 1秒
animationDuration: 500, //アニメーション時間 1000 = 1秒
controlNav: false, //ページングナビボタン true or false
  pauseOnAction: true, //アクション時にストップ true or false
pauseOnHover: false //マウスオーバー時にストップ true or false

関連記事

New

Aechive

Tag

css Facebook facebookカスタマイズ Facebookページ facebooRSS font functions.php google NEWマーク photoshop RSS SEO single.php webツール WEBデザインツール Wordpress アイコン アーカイブ エディタ カスタム カスタムタクソノミー カスタムフィールド カスタムフィールドテンプレート カスタム投稿 カテゴリー カレンダー クリップアート サイドバー ターム テキスト テンプレートタグ パターン ブラシ プラグイン ヘッダ ページ 人気 便利 分岐 文法チェック 月別アーカイブ 特定カテゴリー 画像 記事