読者です 読者をやめる 読者になる 読者になる

webプロダクトいんふぉ

webの気になった情報を発信中!!

カルーセルスライダーを条件別にスライド位置を変える

ルーセルスライダーとは?

画像やコンテンツがスライドして別のコンテンツを切り替えて表示する方法
DEMO
Download

ライブラリとしては、良くslick.jsbxslider.jsが使われる
個人的にはslick.jsが使いやすい。カスタマイズする際、bxsliderはハマりやすい。その代わり、高機能。

今回はslick.jsを使用する。

slick-theme.cssは必須ではないですが、公式のdemoみたいな見た目にしたいのであれば入れた方がいいです。一応jQueryも読み込んでいます。

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="css/slick-theme.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

適当にヘッダー部分と、スライドコンテンツを作ります。

注意点としては、スライドさせたいコンテンツはdivタグで括ってあげることです。ulタグなどで括るとうまく動作しません。

<header id="header">
  <div id="header-inner">
    <h1>SlickSample</h1>
    <ul class="flR">
      <li><a href="#one">one</a></li>
      <li><a href="#two">two</a></li>
      <li><a href="#three">three</a></li>
    </ul>
  </div>
</header>

<div class="slide-wrapper slider">
  <div>
    <img src="img/slide_01.jpg" alt="">
  </div>
  <div>
    <img src="img/slide_02.jpg" alt="">
  </div>
  <div>
    <img src="img/slide_03.jpg" alt="">
  </div>
</div>

jsでslick.jsのメソッドを呼んでいます。中に書いている「accessibility」、「dots」などはオプションです。見た目や動きなどを変えたいときには、ここ(自分で書くjs)とslick-theme.cssをカスタムすることになります。

オプション一覧

オプション名 デフォルト 説明
accessibility bool true 左右のナビゲーションの有効/無効
autoplay bool false オートプレイの有効/無効
autoplaySpeed int 3000 スライドが切り替わる時間(ms)
dots bool false カレント表示のナビゲーション
arrows bool true 前へ/次へナビゲーションの有効/無効
initialSlide int 0 最初のスライド位置

オプションは他にも多々あるので、興味がある方は公式サイトを参考にしてみてください。settingsが該当箇所です。

$('.slide-wrapper').slick({
  accessibility: false,
  dots: true,
  arrows: false,
  autoplay: true,
  initialSlide: slide_int
});

先程、書いたjsの前に追記してあげます。ヘッダーメニューをクリックした時に、URLに付与された#***で条件判定してあげて、どのスライドを最初に出すかを選択してあげるjsです。

これで、メニューごとにスライドの初期位置を出しわけることが可能です。

var slide_int = 0;
$('.flR a').on('click', function(){
  location.reload()
});

var href = location.href.substr( location.href.indexOf("#") );
if(href == "#one") {
  slide_int = 0;
} else if(href == "#two") {
  slide_int = 1;
} else if(href == "#three") {
  slide_int = 2;
}

$('.slide-wrapper').slick({
  accessibility: false,
  dots: true,
  arrows: false,
  autoplay: true,
  initialSlide: slide_int
});