slick.js:カルーセルスライダー



色々なタイプのカルーセルスライダー(複数枚をスライド)です。
デモは参考サイトをみてください。
参考サイト:http://kenwheeler.github.io/slick/

以下のGithubより必要ファイルをダウンロードして、slickフォルダをjsフォルダ以下に保存。

https://gitlab.com/accorder/accorder_library/tree/master/05.%20jquery/slick

【1】<head>に追加する項目
<link rel="stylesheet" type="text/css" href=“js/slick/slick.css">
<link rel="stylesheet" type="text/css" href=“js/slick/slick-theme.css">
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>

【2】<body>に追加する項目
<div class="slider autoplay">  <<自分が入れる動きのクラスを記述
※ボタンの記述は勝手にはいるのでいらない
    <div>    </div>
    <div>    </div>
    <div>    </div>
    <div>    </div>
</div>
【3】<body>の一番下に記述
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

ここに↓使用するデモのカルーセルの下にあるスクリプトを記述する
  <script type="text/javascript">
    $(document).ready(function(){
      $('.your-class').slick({
        setting-name: setting-value
      });
    });
  </script>
※※ カルーセルオプション※※
$('.slider').slick({
  // アクセシビリティ。左右ボタンで画像の切り替えをできるかどうか
  accessibility: true,
  // 自動再生。trueで自動再生される。
  autoplay: false,
  // 自動再生で切り替えをする時間
  autoplaySpeed: 3000,
  // 自動再生や左右の矢印でスライドするスピード
  speed: 400,
  // 自動再生時にスライドのエリアにマウスオンで一時停止するかどうか
  pauseOnHover: true,
  // 自動再生時にドットにマウスオンで一時停止するかどうか
  pauseOnDotsHover: true,
  // 切り替えのアニメーション。ease,linear,ease-in,ease-out,ease-in-out
  cssEase: 'ease',
  // 画像下のドット(ページ送り)を表示
  dots: false,
  // ドットのclass名をつける
  dotsClass: 'dot-class',
  // ドラッグができるかどうか
  draggable: true,
  // 切り替え時のフェードイン設定。trueでon
  fade: false,
  // 左右の次へ、前へボタンを表示するかどうか
  arrows: true,
  // 無限スクロールにするかどうか。最後の画像の次は最初の画像が表示される。
  infinite: true,
  // 最初のスライダーの位置
  initialSlide: 0,
  // 画像の遅延表示。‘ondemand’or'progressive'
  lazyLoad: ‘ondemand’,
  // スライドのエリアにマウスオーバーしている間、自動再生を止めるかどうか。
  pauseOnHover: true
  // スライドのエリアに画像がいくつ表示されるかを指定
  slidesToShow: 4,
  // 一度にスライドする数
  slidesToScroll: 1,
  // タッチスワイプに対応するかどうか
  swipe: true,
  // 縦方向へのスライド
  vertical: false,
  // 表示中の画像を中央へ
 centerMode: true,
  // 中央のpadding
  centerPadding: '60px'


  //ノンストップで流れるようにする場合は、
  autoplaySpeed: 0,   //止めておく時間
  speed: 10000,   //一周させる時間
  slidesToShow: 6,  //画面に見せる写真
  slidesToScroll: 1,//一度にスクロールする枚数。

});

ウィンドウの幅を取得するならwindow.innerWidthがベター

ウィンドウの幅を取得する際にJQueryで
var windowWidth = $(window).width();
と書くことが多いと思いますが、この書き方だとスクロールバーの幅を含まないウィンドウの幅を取得します。 一方、CSSのメディアクエリで指定するウィンドウの幅はスクロールバーを含んでいるため、このコードを書いてしまうと、レイアウトが崩れてしまう原因になります。
<解決策>
したがって、下記のようにJavascriptで
var windowWidth = window.innerWidth;
と書くのがベターです。こうすることでメディアクエリとJavascriptで取得するウィンドウ幅のズレを解消でき、レイアウトの崩れを回避することができます。
<注意点>
一点、注意していただきたいのは、IE8ではこの記述が使えないことです。そのため、IE8への対応が必要な案件では、一部レイアウトが崩れてしまいますが、IEに対する条件付きコメントを書いて、IE8以下の場合のみ$(window).width();で幅を取得するようにするといいでしょう。
<!--[if lte IE 8]>適用内容<![endif]-->
<参考サイト>
スクロールバーの表示・非表示の設定(Mac)
Mac – スクロールバーの表示・動作設定
   

colorboxでモーダルウィンドウの中身がスクロールできなくなる現象を解決する方法

JQueryプラグインのcolorboxで下記のように
$(".iframe").colorbox({iframe:true, fixed:true});
モーダルウィンドウの位置を固定に設定し、中身をiframeで表示するようにした際に、iOSのsafariやFirefoxにおいてモーダルウィンドウの中身がスクロールできなくなる現象が起こりました。
この現象を解決する方法を見つけましたので共有いたします。ちなみにcolorboxのバージョンは1.6.4です。

◆解決方法◆

colorbox.cssを開いて、下記のコードを追加します。
#cboxWrapper{-webkit-overflow-scrolling:touch;}
これだけでiOSのsafariでもiframeがスクロールができるようになりました。
カラーボックス以外のライトボックス系のプラグインでも同じような問題が起こるかもしれないので、まずはこの方法を試していただければ幸いです。 参考サイト:http://mamewaza.com/support/blog/iframe-scrolling-on-ios.html