【コピペOK】カルーセルプラグインslickで左右の画像をちょっとだけ見せる方法

こんにちはアカリです。

今回は、slickを少しカスタマイズして左右をちょっとだけ見せるようにしてかっこよくする方法をご紹介します。


slickのサイトで見てもイマイチわからなかったって人も、コピペするだけでOKなのでぜひ使ってください。

出来上がりはこんな感じになります。




同じ画像3枚並べただけなので、少し見づらいかもですが・・・


CSSの設定で左右の画像を半透明っぽくすることもできます。




では、さっそく説明していきます。


スポンサードサーチ

slickを使って左右をチラ見せする方法



まずは、slickのサイトでslickをダウンロードします。(CDNもありますが今回はダウンロード版で)

サイトの上にget it now!とあるので、そこをクリックします。

その後、Downroad Nowをクリックでダウンロードを開始します。

ダウンロードしましたら、ZIPファイルの中にslickフォルダーがあるので、


そのまま自身のJSフォルダーなどに格納しましょう。


フォルダーが準備できたらHTMLに以下のコードを記述してslickの導入をします。

<link rel="stylesheet" type="text/css" href="js/slick/slick.css">
    <link rel="stylesheet" type="text/css" href="js/slick/slick-theme.css">
<script type="text/javascript" src="js/slick/slick.min.js"></script>




上のコードをhead内などで、読み込んでください。

次にHTMLです。


HTML

<div class="slider mypattern">
                    <div><img src="images/image1.jpg" alt=""></div>
                    <div><img src="images/image2.jpg" alt=""></div>
                    <div><img src="images/image3.jpg" alt=""></div>
                    <div><img src="images/image4.png" alt=""></div>

                </div>



imageに好きな画像を入れてください。


続いてCSSです。



スポンサードサーチ

CSS

.slider {
    width: 70%;
    margin: 0 auto 80px;
}

.slick-slide img {
    width: 100%;
    height: auto;
}

.mypattern {
    width: 70%;
}

.mypattern .slick-slide {
    margin: 10px;
}

/*slick setting*/

.mypattern .slick-slide:not(.slick-center) {
    -webkit-filter: opacity(70%);
    -moz-filter: opacity(70%);
    -o-filter: opacity(70%);
    -ms-filter: opacity(70%);
    filter: opacity(70%);
    transition: 0.2s linear;
}

/*slick setting*/

.slick-prev:before,
.slick-next:before {
    color: #000;
}




CSSですが、.mypattern .slick-slide{margin:で画像と画像の間の幅を調整できます。

この辺りはお好みでカスタマイズしてみてください。


1つ目は左右のチラ見せ部分の画像を半透明にしてくれます。

あと、/slick setting/はおまけなのですが、


2つ目は、左右のボタンの色を変えることができます。


デフォルトは確か白なので、



背景が白系で見えにくい場合は好きな色に設定して使ってみてください。


続いて、JSですね。


JavaScript

$(document).ready(function() {
  $('.mypattern').slick({
    autoplay: true,
    autoplaySpeed: 2500,
    speed: 800,
    dots: true,
    arrows: true,
    centerMode: true,
    centerPadding: '20%',
    

  });
});




centerPaddingの値を変えることでチラ見せの幅を広くしたり狭くしたりできます。私は20%にしました。


各オプションは以下の通りです。


オプション説明
autoplay自動再生の有効化
[default:false]
autoplaySpeed自動再生のスピード(ミリ秒単位)
default:3000
speedスライド/フェードアニメーションの速度
[default:300]
dotsドットナビを表示する
[default:false] 
arrows前/次の矢印の生成の有効化
[default:true]
centerModeslidesToShowが奇数の時、現在のスライドを中央に表示するか
[default:false]
centerPaddingcenterMode:trueの時、左右のスライドを見せる幅(px or %)
[default:50px] 





他にもいろいろなオプションありますが、今回使ったのはこれだけでした。


カスタマイズも簡単にできそうですね。


今回はslickの紹介でしたが、今後も便利なプラグインなど、紹介していきたいと思います。




以上です。

〜人気の記事〜

【超簡単】背景画像をスライドショーのように切り替えるプラグイン【BgSwitcher】 【アニメーション】テキストを1文字ずつ表示させるプラグイン【jQuery】




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です