Slick.jsを使ってカルーセルスライダーの中央の画像を大きくする【レスポンシブWebデザインでもOK】

以前書いたslickの記事が比較的に読んでいただけているようなので、調子に乗ってもう一つ書きます。

前回記事
レスポンシブWebデザインに対応!Slick.jsを使ってスライドの サムネイルの位置を切り替える

160423blog

 

現在(2016年4月)弊社では求人を募集していまして、求人ページを作った時に使ったパターンです。
→ この個所(INTERVIEW)です

今回はカルーセルスライダーで、真ん中の写真だけちょっと拡大させて見せるやつです。
カルーセルスライダーでたくさん写真があるぞっていうのを示しておいて、その中でウェイトを付けてあげることで目を引いてもらうパターンですね。
公式のサンプルの中のセンターモードで紹介されているやつ何ですが、普通にセンターモードにするだけだとこうならないし、特に公式では拡大させる方法が紹介されていないんですよね。※見つけられていないだけかもしれません…

ということで求人ページのやつをもう少しシンプルにしたデモを作ってみました。

【DEMO】

HTML

<div class="slider container">
    <div class="slider-for">
        <div class="slide-item"><img src="images/160423/01.jpg" alt=""></div>
        <div class="slide-item"><img src="images/160423/02.jpg" alt=""></div>
        <div class="slide-item"><img src="images/160423/03.jpg" alt=""></div>
        <div class="slide-item"><img src="images/160423/04.jpg" alt=""></div>
        <div class="slide-item"><img src="images/160423/05.jpg" alt=""></div>
    </div> 
</div>

.containerはmax-width: 960px;で画面のセンターに寄せている、個人的に使っているクラスなので無視してください。
あとは比較的普通です。

Javascript

$(window).load(function(){
    $('.slider-for').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        dots: true,
        centerMode: true,
        infinite: true,
        autoplay: true,
        centerPadding: '100px',
        arrows: false,
        responsive: [                    
            {
                breakpoint: 480,
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '0px',
                    slidesToShow: 1
                }
            }
        ]
    });

    // ナビゲーション用
    $('.slick-dots').find('li').eq(0).addClass('slick-current');
    // On before slide change
    $('.slider-for').on('beforeChange', function(event, slick, currentSlide, nextSlide){     
        $('.slick-dots').find('li').removeClass('slick-current');
        $('.slick-dots').find('li').eq(nextSlide).addClass('slick-current');
    });
});

Javascriptで大事なところは、

  • centerModeをtrueに設定すること。
  • slidesToShowは奇数にすること。
  • centerPaddingで画像間の余白の調整

になると思います。

CSS

.slider{
    overflow-x: hidden;   
}
.slick-list{
    overflow: visible;   
}
.slick-slide{
    text-align: center;   
}
.slider-for img{
    max-width: 280px;
    height: auto;
    box-shadow: 1px 1px 3px rgba(200, 200, 200, 0.8);
    display: inline-block;
}
.slider-for .slick-current img{
    transform: scale(1.10);
}  
/* ページャー */
.slick-dots{
    text-align: center;
    margin-top: 50px;
}
.slick-dots li{
    display: inline !important;
    margin: 0.5em;
}
.slick-dots button{
    display: inline !important;
    width: 1em;
    height: 1em;
    background-color: #ccc;
    text-align: center;
    overflow: hidden;
    text-indent: 2em;
    border-radius: 100%;
}
.slick-dots .slick-current button{
    background-color: aqua;
}
/* スマートフォンの場合 */
@media(min-width : 480px){
    .slider-for img{
        max-width: 300px;
        border: 10px solid #fff;
    }
    .slider-for .slick-current img{
        transform: scale(1.15);
    }
}

ちょっと長いですけど、拡大させるのに重要なポイントは

.slider-for .slick-current img{
transform: scale(1.10);
}

ここだけなんですよね。slickの場合、センターモードにすると、currentスライダーがセンターになり、.slick-currentが付与されるので、.slick-currentの中の画像のscaleを大きくしてあげています。
さらにslick側で用意する.slick-listにoverflow: hidden;がslick.cssで設定されていて拡大したときに画像が見切れてしまうので、overflow: visible;にするか、paddingで上下に余白をとってあげれば大丈夫です。

基本的にはこれで何とかなると思います。
画面いっぱい画像を並べるのであれば、.containerではなくてwidth: 100%;にしてカルーセルスライダーを画面のセンターに絶対配置してあげるとよいと思います。
あとは大きさや画像ふちを付けたり、影を付けたりと装飾して見た目を整えます。

slick使いやすくて好きです。前回のとはちょっと毛色が違いますが、こんな使い方もできますね。(というか、こちらの方がslickっぽいですね)
ほかにもこんなことできたーとか出てきたらまた紹介しますね。
もしくはこんなんはできないのか?ってのがあれば、挑戦してみますのでコメントください。

というわけで、弊社ではただいま求人募集中です。

求人募集中

※この情報は2016年4月現在の情報です。詳しくはアートグラフィック新潟Webサイトよりお問い合わせください。


レスポンシブWebデザインに対応!Slick.jsを使ってスライドの サムネイルの位置を切り替える

年末からの体調不良からいっこうに立ち直れないyasaiです。先日の大寒波からみなさんは立ち直ったでしょうか?

さて僕としては2016年1回目のブログとなります。気合い入れていきます!!なんていうと、あとが続かなくなるので、今回はサラッと軽めに参ります。

160127

みなさんはサイト制作するとき、メインに使うスライダーって決めてますか?僕の本命は bxSliderslickです。この2本の使い分けって感じですねー

先日やらせていただいた案件で、メインのスライドエリアの横にサムネイル表示されるパターンのものがあったので、今回はその時のお話です。スマホの時はサムネイルを下へ移動します。

【DEMO】

今回はslickを使いました。slickの素敵な所は、画面幅にによってオプションを切り替えられるところですね。それと今回の案件でslickを使うことにしたのは、サムネイルの表示が別のHTMLとして書くことができて、CSSでの制御がしやすかったからです。

まずはslick.jsとCSSを読み込みます。jQueryのプラグインですので、お約束jQueryと一緒に。

<script src="jquery.js"></script>
<script src="slick.min.js"></script>
<link rel="stylesheet" href="slick.css">

 

※追記

slick-theme.cssは読み込んでいません。slick-theme.cssを読み込むと縮めたときに「戻る」ボタンの表示がうまくいかないようです。
一応回避方法を考えてみましたのでコメントをご覧ください。

 

スライダー部分のHTMLはこんな感じに。

<div class="slider container">
    <div class="slider-for">
        <div class="sp-slide"><img src="images/01.png" alt=""></div>
        <div class="sp-slide"><img src="images/02.png" alt=""></div>
        <div class="sp-slide"><img src="images/03.png" alt=""></div>
        <div class="sp-slide"><img src="images/04.png" alt=""></div>
        <div class="sp-slide"><img src="images/05.png" alt=""></div>
        <div class="sp-slide"><img src="images/06.png" alt=""></div>
    </div>     
    <div class="slider-nav-wrap">
        <div class="slider-nav">
            <div class="sp-thumbnail"><img src="images/01.png" alt=""></div>
            <div class="sp-thumbnail"><img src="images/02.png" alt=""></div>
            <div class="sp-thumbnail"><img src="images/03.png" alt=""></div>
            <div class="sp-thumbnail"><img src="images/04.png" alt=""></div>
            <div class="sp-thumbnail"><img src="images/05.png" alt=""></div>
            <div class="sp-thumbnail"><img src="images/06.png" alt=""></div>
        </div>
        <div class="slick-nav-arrows">
            <div class="slick-next"></div>
            <div class="slick-prev"></div>
        </div>
    </div>
</div>

スライダーのメイン部分を.slide-for、サムネイル部分を.slider-nav、矢印を.slick-nav-arrowsでマークアップしています。ひとつポイントなのが、.slider-navと.slick-nav-arrowsを.slider-nav-wrapでひとくくりにしているところでしょうか。

 

動作のためのJavascriptをこんな感じです。

$(document).ready(function(){
    $('.slider-for').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: false,
        asNavFor: '.slider-nav'
    });
    $('.slider-nav').slick({
        slidesToShow: 4,
        slidesToScroll: 1,
        asNavFor: '.slider-for',
        dots: false,
        centerMode: true,
        focusOnSelect: true,
        vertical: true,
        arrows:  true,
        prevArrow: $('.slick-prev'),
        nextArrow: $('.slick-next'), 
        responsive: [
            {
                breakpoint: 768,
                settings: {
                    centerMode: true,
                    vertical: false
                }
            }
        ]
    });
});

メイン.slider-forとサムネイル.slider-navの両方ともスライダーとして動作させます。
メインである.slider-forのオプションで「asNavFor : ‘.slider-nav’」として、.slider-navがサムネイルボタンとして機能するようにします。

サムネイルの方は、今回は4枚並ぶ形にしました。「slidesToShow: 4」
「the last carousel 」なんていうサブタイトルがついてるくらい、使いやすいカルーセルスライダーですなんですよね。

そしてslickのよいところ、オプション「responsive」でブレイクポイントを設定し、表示を切り替えます。今回は768pxをブレイクポイントとし、縦型のスライダーにするかどうかを切り替えています。その他詳しいオプションなどは、本家サイトをご覧ください。

 

見た目の方のCSSはこんなです。

.slider{
    position: relative;
    max-width: 960px;
}
.slider img{
    max-width: 100%;
    height: auto;
}
.slider .slider-nav-wrap{
    position: relative;
}
.slider .slider-nav-wrap .slider-nav .slick-list{
    padding: 0 !important;
}
.slider .slider-nav-wrap .slider-nav .slick-track{
    left: 0 !important;
    width: 100%;
    opacity: 1;
}
.slider .slider-nav-wrap .slider-nav .slick-slide{
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease;
    opacity: 1;
    padding: 5px;
}
.slider .slider-nav-wrap .slider-nav .slick-slide:hover{
    opacity: .5;
}
.slider .slider-nav-wrap .slick-arrow{
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.slider .slider-nav-wrap .slick-prev{
    right: 0;
    border-width: 6px 0 6px 12px;
    border-color: transparent transparent transparent #444444;
}
.slider .slider-nav-wrap .slick-next{
    left: 0;
    border-width: 6px 12px 6px 0;
    border-color: transparent #444444 transparent transparent;
}
@media (min-width: 768px){
    .slider .slider-for{
        float: left;
        width: 79.1666%;
    }
    .slider .slider-nav-wrap{
        position: absolute;
        top: 50%;
        right: 0;
        width: 16.6666%;
        padding: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .slider .slider-nav-wrap .slider-nav .slick-list{
        padding: 0 0 !important;
    }
    .slider .slider-nav-wrap .slider-nav .slick-track{
        left: 0 !important;
    }
    .slider .slider-nav-wrap .slider-nav .slick-slide{
        padding: 0;
    }
    .slider .slider-nav-wrap .slick-arrow{
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    .slider .slider-nav-wrap .slick-prev{
        top: auto;
        bottom: -1.5em;
        border-width: 18px 9px 0 9px;
        border-color: #444444 transparent transparent transparent;
    }
    .slider .slider-nav-wrap .slick-next{
        top: -1.5em;
        border-width: 0 9px 18px 9px;
        border-color: transparent transparent #444444 transparent;
    }
}

ちょっと長いですけど、基本的にはたいしたことしてないですね。

メディアクエリで768px以上の場合はメイン部分を左に寄せて、サムネイル部分は天地のセンターをとりたかったので、絶対配置で右寄せにしているだけです。この時に幅を%で指定してあるから縮んでいくよ、というからくり。(imgをmax-width:100%にしています)
.slider-navと.slick-nav-arrowsを.slider-nav-wrapでひとくくりにしたのは.slick-nav-arrowsをうまいこと配置したかったから、ということです。(.slider-navの位置に合わせて天地or左右のセンターをとりたかった)

スマホのときは特にfloatも絶対配置もしていないので、メインの下にサムネイルがやってくるという仕掛けになってます。
DEMOのブラウザ幅を広げたり縮めたりするを動作を確認いただけると思います。

 

今回はコードばかりでいつも以上にとっつきにくいですね。スイマセン・・・

 

追記(2016/04/25)

サンプルその2も作ってみました。よろしければこちらもどうぞ!

Slick.jsを使ってカルーセルスライダーの中央の画像を大きくする【レスポンシブWebデザインでもOK】


Fullcalendar動いてないから修正してみる

寒いです。皆さんは風邪ひいてませんか? 先週末は大雪でした。今週末も大雪見たいです。 これは私に冬眠しろってことですね??えぇ雪国生まれなもので、雪かきとか無駄に頑張っちゃいますけどね。 ちなみに「雪かき」っていいます?「雪のけ」っていいます?   さて、営業日カレンダーをGoogleカレンダーを使って表示しているところがあったのですが、どうもうまく動いていない模様。Firebugでエラーを見ると、Googleカレンダーのイベントを取得するところでエラーが起こっている模様。 さてさて、困ったぞ、ということで調べました。 どうも原因は2点。

  • Calendar APIがv2→v3になったこと。
  • FullCalendarのバージョンがあがったこと。

ということで修正します。  

Calendar APIを使えるようにする

まずCalendar APIを使えるようにします。v2→v3になって、API Keyが必要になったようです。 API Keyの取得はGoogle Developers Consoleから行います。 アカウントの登録が終わったら、新しくプロジェクトを作り、 141212_01

 メニューのAPIからCalendar APIを選択し、カレンダーをOnにします。

141212_02

141212_03

次に認証情報から新しくKeyを作成します。選択するのはブラウザキーです。

141212_04

141212_05

そうすると下のような画面になるので、ここは何も入力せずに作成を押しちゃってよいみたいです。 これでAPI Keyが取得できました!

141212_06 

141212_07

Fullcalendarをバージョンアップする

サイトに行ってfullcalendar.min.jsをダウンロードしてきます。 ※2014年12月12日現在、最新版は2.2.3のようです。 ダウンロードしてきたら、必要なファイルを読み込みます。


<script src='js/moment.min.js'></script>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/fullcalendar.min.js"></script>
<script src="js/gcal.js"></script>
<script src="js/calendar.js"></script> //Fullcalendar設定用。これは各自変更してください。

  このような感じになります。   次にカレンダーの設定をします。 「googleCalendarApiKey」に取得したAPI Keyを、 「events」に表示したいカレンダーのIDを設定します。


$(document).ready(function() {
  $('selector').fullCalendar({
    googleCalendarApiKey: 'ここにAPI Key',
    events: '表示したいGoogleカレンダーのID',
    //日本の休日表示
    eventSources: [
      {
       url:'ja.japanese#holiday@group.v.calendar.google.com'
      }
    ]
  });
});

ちなみに、 カレンダーのIDはGoolgeカレンダーのここです。

141212_08

その他のオプションの設定は本家サイトをご覧ください。   これで無事に営業カレンダーが復活しました。 カレンダーがうまく動かなくて、毎日が営業日のようになっていた悲劇もこれで無事解決です。   今回参考にさせていただいた記事(ありがとうございました!) fullcalendar.js + gcal.jsでGoogle API v3を使ってGoogleカレンダーを表示する


とても初歩的なjQuery(僕のスニペットの中から)

お昼に外に出たら霰と霙(漢字で書くとなんだかちょっと迷いますね)の中間みたいなのに降られたyasaiです。

急に冬っぽくなってきまして、北国生まれの寒がりにはちょっと厳しい季節になってきました。

長袖をせっせと着込んで、早速着ぶくれしてます。

ちなみに、暑いのも苦手です。ずっと春がいいなぁ。

141028

さて最近はWordPressのお勉強していて、先日久しぶりにjQuery書いたら、「あ、PHPじゃない…」と思うくらいアホになってたわけでして。

これはいかんなぁということで、ごく初歩的なことからjQueryのおさらいをしてみたいと思います。

基本的には適当に保存してあったスニペットからですが…

 

「$(document).ready()」と「$(window).load()」

僕もはじめは呪文のように覚えてましたが、$(document).ready()と$(window).load()の違いについて。

まずは使い方。


その1
$(document).ready(function(){
  //ここに処理
});

その2
$(window).load(function(){
  //ここに処理
});

どちらも意味合いとしては、「~が完了したら」ってことですが、

ここではざっくりつかむと、$(document).ready()のほうは、「HTML読みこみ終わったら処理」。

$(window).load()の方は「描画とかも終わったら処理」。って感じですかね。

だから、画像の高さを取得したいとかいう場合は、$(window).load()の方をつかわないとダメなんですね。

 

タイミングを見計らって処理「setTimeout()」

これもよく使いますよね。


var time = 1000;
$setTimeout(function(){
  //処理
},time);
//timeは何ミリ秒後に処理が始まるか。
//1秒後だったら1000。

アニメーションさせるときとかによく使いますねー。


$(document).ready(function(){
  $('#btn').on(
    'click' : function(){
      var time = 1000;
      $setTimeout(function(){
        $(#content).fadeOut(1500);
      },time);
    }
  );
)}

例えばこんな感じですかね。これで、#btnをクリックして1秒後に#contentがフェードアウトします。

今回はとても初歩的なところですけど、自分のリハビリもかねて算数ドリルです。
やっぱりなんでも日々触ってないと抜けていくもんだぁと実感している最近です。
抜けていくのはあっという間なのに、覚えられるものが年々少なくなっているのは、これどういうことなんでしょう?(苦笑)