【解説】slickで左右の画像を「透過・小さく」させる方法

記事内に広告を含みます

パソ君

・slickで左右の画像を透過したり、小さくさせる方法は？

こんな疑問にお答えします。

slickでスライダーを作成するとき、左右の画像のみに装飾したいときありますよね。

真ん中の画像だけ普通で、左右だけ小さくさせたりなど。

あれ実は簡単に実装できちゃいます。

ジト

すぐにできるよ！

ということで、この記事では「slickで左右の画像を「透過・小さく」させる方法」について解説していきます！

この記事でわかること

・slickで左右の画像を「透過」させる方法
・slickで左右の画像を「小さく」させる方法
・slickで左右の画像を「透過」＋「小さく」させる方法

2023年1月24日【jQuery】slickの使い方｜初心者向けに解説【レスポンシブ対応】

【解説】slickで左右の画像を「透過」させる方法
【解説】slickで左右の画像を「小さく」させる方法
【解説】slickで左右の画像を「透過＋小さく」させる方法
- 画像数によって２週目がガタつく
【解説】slickで左右の画像を「透過・小さく」させる方法：まとめ

【解説】slickで左右の画像を「透過」させる方法

まず左右の画像だけ「透過」させる方法を紹介します。といっても小さくと同じやり方ですけどね。

結論としては「slick-center」を使うことです。

サンプルがこちら↓

See the Pen ➀slick01 by jito-coder (@jito-coder) on CodePen.

<div class="test-slick">
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/3.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/4.png" alt="" width="500" height="233"></div>
</div>

.test-slick__item img {
    height: auto;
    width: 100%;
    opacity: .4;
    transition: opacity .5s; 
}

.test-slick__item.slick-center img {
    opacity: 1;
}

$(function () {
    $(".test-slick").slick({
        autoplay: true,
        centerMode: true, 
        centerPadding: '0px',
        slidesToShow: 3,
        dots: true,
        arrows: false,
    });
});

重要なコードがこちら↓

「centerMode」で中央に
全部の画像に対して透過させる
「slick-center」クラスに対して指定

順に見ていきましょう。

➀：「centerMode」で中央に

まず普通に中央ぞろえになったスライダーの実装をします。

<div class="test-slick">
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/3.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/4.png" alt="" width="500" height="233"></div>
</div>

４枚の画像を並べて、

下記のように「slidesToShowを３に」「centerModeをtrue」にして中央にします。

$(function () {
    $(".test-slick").slick({
        autoplay: true,
        centerMode: true, 
        centerPadding: '0px',
        slidesToShow: 3,
        dots: true,
        arrows: false,
    });
});

➁：全部の画像に対して透過させる

続いて全部のスライダー画像に対して、透過させましょう。

.test-slick__item img {
    height: auto;
    width: 100%;
    opacity: .4;
}

透過率を「0.4」にしました。
これで現状、全部の画像が透過しております。

➂：「slick-center」クラスに対して指定

後は真ん中に表示させる画像のみ、透過を元に戻せばOKです。

やり方は「slick-center」を使うことです。

実は「centerMode」を使うと、真ん中の画像に対して「slick-center」というクラスが付与されます。

つまりこのクラスに対してCSSを当たれば良いということ。

下記の感じですね↓

.test-slick__item.slick-center img {
    opacity: 1;
}

これで真ん中の画像のみ、元の透過率になりました！

あとは良い感じに反映するように、全画像のopacityに対してtransitionをかけてあげましょう↓

.test-slick__item img {
    height: auto;
    width: 100%;
    opacity: .4;
    transition: opacity .5s; 
}

ジト

これで実装完成！

【解説】slickで左右の画像を「小さく」させる方法

次に左右の画像を「小さく」する方法を紹介します。

といっても透過とやり方は同じです。

「全体の画像にscaleを指定して小さくする⇒真ん中の画像にscaleを指定して元の大きさに」これだけですね。

See the Pen slick左右透過➀ by jito-coder (@jito-coder) on CodePen.

.test-slick__item img {
    height: auto;
    width: 100%;
    transform: scale(.7);
    transition: transform .5s; 
}

.test-slick__item.slick-center img {
    transform: scale(1);
}

【解説】slickで左右の画像を「透過＋小さく」させる方法

最後に「透過＋小さく」する方法を紹介します。

といってもこれもやり方は同じ。opacityとscaleを合体させて指定すればOKです。

See the Pen slick左右透過➁ by jito-coder (@jito-coder) on CodePen.

.test-slick__item img {
    height: auto;
    width: 100%;
    opacity: .4;
    transform: scale(.7);
    transition: opacity .5s, transform .5s; 
}

.test-slick__item.slick-center img {
    opacity: 1;
    transform: scale(1);
}