Image 1 Image 2 Image 3 Image 4
Message Sample1

My Image Slider

下段のメッセージはHTMLタグもOK
Message Sample3
Message Sample4

StudioKey MySliderに関して

StudioKey MySliderは出来るかぎり手間をかけずに画像を放り込むだけで動作するよう、シンプルに設計されたレスポンシブイメージスライダーです。

主な機能

タブレットやスマートフォンで最適なサイズに自動変更するレスポンシブ対応 左右移動アイコン 画像のALTをスライダー上部にアニメーション表示 スライダー下部へ自由にメッセージを表示 ページャー機能 サムネイル機能 背景色や文字色の変更 スマートフォンやタブレットなどタッチパネル搭載機の場合は指でスライド出来ます。

注意点

サムネイルや左右アイコンを押すとオートスライドがオフになり、再開は出来ません。 レスポンシブ対応や諸々の仕様により、パソコンの大画面モニターにおいて、画面全体をカバーするスライドは出来ません(不可能では有りませんがコツがありちょっと大変です) 大きさの違う画像をoverflow: hiddenでカバーするという概念が有りません。画像は原則、同じ大きさで作成する必要が有ります。

ダウンロード

ブラウザから保存するか、右クリックで保存して下さい。

StudioKey MySlider v1.01 サンプルファイルの一括ダウンロード

設置手順

1. jQueryとjquery.mySlider.jsを読み込む

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="jquery.mySlider.js"></script>

2. 画像の用意とスタイルの記述

作成した画像の大きさで、以下のようなCSSを設定して下さい。

  <style type="text/css">
    #mySlider{
      width: 1140px;
      height: 570px;
      overflow: hidden;
      position: relative;
    }
    @media screen and (max-width: 959px){
      #mySlider{
        width: 100%;
      }
      #mySlider img{
        width: 100%;
        height: auto;
      }
    }
  </style>

#mySliderの部分はお好きな名前で構いません。

幅と高さを作成した画像と同じサイズにして下さい。

@media screen and (max-width: 959px) はブラウザ(モニター)の幅がこれ以下になるとスマフォ表示に切り替わる設定です。だいたいこのくらいのサイズで大丈夫と思いますが、適宜変更して下さい。

3. 画像を配置する

    <div id="mySlider">
      <a href="#"><img src="images/01.jpg" width="1140" height="570" /></a>
      <a href="#"><img src="images/02.jpg" width="1140" height="570" /></a>
      <a href="#"><img src="images/03.jpg" width="1140" height="570" /></a>
    </div>

Aタグはリンクする必要が無くても設定して下さい。

4. javascriptの記述

    <script type="text/javascript">
        $('#mySlider').mySlider();
    </script>

装飾の一切ない、画像をスライドさせるだけの設定です。

ページャーを表示する

SAMPLE

  $('#mySlider').mySlider({
    'paging' : true
  });

左右移動コントローラーを表示する

SAMPLE

  $('#mySlider').mySlider({
    'controll' : true
  });

サムネールを表示する

SAMPLE

    $('#mySlider').mySlider({
      'thumbnail' : true
    });

ALTをアニメーション表示する

SAMPLE

  $('#mySlider').mySlider({
    'alt' : true
  });

下部に文章を表示する

SAMPLE

  $('#mySlider').mySlider({
    'message' : true
  });

これだけ少し特殊で、画像の下に表示したいメッセージを配置します。

下のように、表示したいメッセージ分だけ追加します。data-num="0"は1枚目の画像の文章という点に注意して下さい。

HTMLも書けますが、画像を直接配置すると100%表示になってしまいますのでご注意を。CSSで背景画像指定したものを配置するなど工夫して下さい。

  <div id="mySlider">
    <a href="#"><img src="images/s01.jpg" width="500" height="350" alt="Image 1" /></a>
    <a href="#"><img src="images/s02.jpg" width="500" height="350" alt="Image 2" /></a>
    <a href="#"><img src="images/s03.jpg" width="500" height="350" alt="Image 3" /></a>

    <!-- message 0から始まる事に注意 [mySlider_message]は変更不可 -->
    <div class="mySlider_message" data-num="0">Message Sample1</div>
    <div class="mySlider_message" data-num="1">Message Sample2</div>
    <div class="mySlider_message" data-num="2">Message Sample3</div>
  </div>

バリエーション

     //スライダー設定 -------------------------
      ,'slider'      : true  //有効(true) 無効(false)
      ,'imgmove'     : 1000  //画像スライドのスピード
      ,'delay'       : 5000  //次の画像へスライドする待機時間
      ,'start'       : 1000  //スライダー開始遅延

     //○ページャー設定 -------------------------
      ,'paging'      : false     //有効(true) 無効(false)
      ,'page_def'    : '#DDDDDD' //デフォルトの色
      ,'page_this'   : '#000000'    //現在の色
      
     //左右アイコン設定 -------------------------
      ,'controll'    : false     //有効(true) 無効(false)
      ,'cnt_bg'      : '#000000' //背景色
      ,'cnt_cr'      : '#FFFFFF' //文字色
      ,'cnt_L'       : '&Lt;'    //左へ進む文字
      ,'cnt_R'       : '&Gt;'    //右へ進む文字 
      ,'cnt_radius'  : '20px'    //丸め *20pxで○
      ,'cnt_add_css' : '-webkit-box-shadow: 0px 0px 5px #404040; box-shadow: 0px 0px 5px #404040;' //追加CSS

     //サムネイル -------------------------------
      ,'thumbnail'   : false     //有効(true) 無効(false)
      ,'thm_opacity' : '0.40'    //画像の透明度
      ,'thm_bg'      : '#000000' //背景色
      ,'thm_size'    : '40px'    //サムネイル画像の幅
      
     //ALT -------------------------------
      ,'alt'         : false     //有効(true) 無効(false)
      ,'alt_opacity' : '0.80'    //透明度
      ,'alt_bg'      : '#000000' //背景色
      ,'alt_cr'      : '#DDDDDD' //文字色
      ,'alt_tmg'     : '800'    //animation発動遅延

     //メッセージ -------------------------------
      ,'message'     : false     //有効(true) 無効(false)
      ,'msg_opacity' : '0.80'  //透明度
      ,'msg_bg'      : '#000000' //背景色
      ,'msg_cr'      : '#FFFFFF' //文字色
      ,'msg_tmg'     : '800'   //animation発動遅延
      
     //ローディング画面 -------------------------
      ,'ldg_bg'      : '#000000' //背景色
      ,'ldg_cr'      : '#92C000' //文字色
      ,'ldg_txt'     : 'Now Loading....' //文字
      ,'ldg_img'     : '' //loading画像 *<span id="loading_img"></span>などCSSで。
        

License

under MIT