slickを使用して、スライドショーを作成しています。
センターの画像以外の両サイド画像を半透明にしました。

しかし、２枚を中央に表示させる必要が出てきたため
slidesToShow:2　を追加して中央に2枚表示できたのですが、２枚のうちの１枚のみが不透明、
右側の画像が半透明になりました。
中央の２枚を不透明（オリジナル画像）にできますでしょうか？
よろしくお願いいたします。

HTML************************************************************
<link rel="stylesheet" href="css/all.css" />
<link rel="stylesheet" href="css/slick-theme.css" type="text/css">
<link rel="stylesheet" href="css/slick.css" type="text/css">
<link rel="stylesheet" href="css/common.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="js/slick.js"></script>
～～～～～～～～～～～～　省略　～～～～～～～～～～～～
<div class="sliderArea">
<div class="center">
  <div>
    <img src="phot/top_phot/resize001.jpg" alt="">
  </div>
  <div>
    <img src="phot/top_phot/resize007.jpg" alt="">
  </div>
  <div>
    <img src="phot/top_phot/resize003.jpg" alt="">
  </div>
  <div>
    <img src="phot/top_phot/resize004.jpg" alt="">
  </div>
  <div>
    <img src="phot/top_phot/resize005.jpg" alt="">
  </div>
  <div>
    <img src="phot/top_phot/resize006.jpg" alt="">
  </div>
</div>    
</div>

<script>
$(document).ready(function(){
    $('.center').slick({
        infinite: true, 
        dots:true, 
        centerMode: true, 
        centerPadding:'20%',
        slidesToShow:2,
        slidesToScroll: 1,
        autoplay:true, 
    });
});    
</script>

css/common.css　*************************************************************

.sliderArea{background-color: #fff;margin:0;}
 .center { 
   margin: 0 auto 50px;
   opacity: 0;
   transition: 2s;
}
.center {
	width: 100%;
	height: 320px;
}
.center div {
	height: 320px;
}
.slick-initialized{
   opacity: 1
}
.center img { width: 100%; }
   .center .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;
}

runnynose

2021/06/14 15:37

jsのセレクタが.centerでcssのセレクタが.sliderとなっているのが謎なので、HTMLも載せれますか？？

reiko_y

2021/06/15 06:26

ありがとうございます。間違いも含めて質問を再度記入し直しました。よろしくお願いします。このコードでやはり、同じ現象です。

行動規範の内容に同意します

回答2件

ベストアンサー

どうもSlickのオプションにあるcenterModeが偶数の時に位置調整でバグるみたいで、ずっと修正されていないようですね^^;
(初めて知りました。。。)
https://github.com/kenwheeler/slick/issues/2795

以下のように解決しました。
※修正バージョンがリリースされてSlickのバージョン入れ替えをする際は注意が必要です。

対応内容

透過させないクラスの条件を.slick-centerから.slick-activeに変更。
バグっている位置調整用のスタイル追加。
無限ループ機能がつかない時は位置調整が不要なため、無限ループがでる要素数のときに上記スタイルを当てる。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
9    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
10    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
11    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
12    <style>
13    .sliderArea{background-color: #fff;margin:0;}
14    .center { 
15        margin: 0 auto 50px;
16        opacity: 0;
17        transition: 2s;
18    }
19    .center {
20        width: 100%;
21        height: 320px;
22    }
23    .center div {
24        height: 320px;
25    }
26    .slick-initialized{
27    opacity: 1
28    }
29    .center img { width: 100%; }
30    .center .slick-slide:not(.slick-active) {/* .slick-center → .slick-activeに変更 */
31        -webkit-filter: opacity(70%);
32        -moz-filter: opacity(70%);
33        -o-filter: opacity(70%);
34        -ms-filter: opacity(70%);
35        filter: opacity(70%);
36        transition: 0.2s linear;
37    }
38    /* 位置調整スタイル */
39    .adjustment .slick-list {
40        overflow: visible;
41        transform: translateX(-30%);
42    }
43    </style>
44    <script>
45    $(document).ready(function(){
46        // スライダー要素の数が3以上の時調整用クラスを付与
47        (2 < $('.center div').length) ? $('.center').addClass('adjustment') : null;
48
49        $('.center').slick({
50            infinite: true, 
51            dots:true, 
52            centerMode: true,
53            centerPadding:'20%',
54            slidesToShow:2,
55            slidesToScroll: 1,
56            autoplay:true,
57        });
58    });
59    </script>
60</head>
61<body>
62    <div class="sliderArea">
63        <div class="center">
64          <div>
65            <img src="https://placehold.jp/150x150.png" alt="">
66          </div>
67          <div>
68            <img src="https://placehold.jp/150x150.png" alt="">
69          </div>
70          <div>
71            <img src="https://placehold.jp/150x150.png" alt="">
72          </div>
73          <div>
74            <img src="https://placehold.jp/150x150.png" alt="">
75          </div>
76          <div>
77            <img src="https://placehold.jp/150x150.png" alt="">
78          </div>
79          <div>
80            <img src="https://placehold.jp/150x150.png" alt="">
81          </div>
82        </div>    
83    </div>
84</body>
85</html>

投稿2021/06/15 12:57

編集2021/06/15 12:59

runnynose

総合スコア497

reiko_y

2021/06/16 07:13

ありがとうごうざいます！思い通りに表示できました。ひとりではバージョンの違いや位置調整までたどり着けず透過をあきらめるところでした。感謝の気持ちを込めてベストアンサーに選ばせていただきます。

行動規範の内容に同意します

CSSのセレクタを以下のように変えたらどうでしょうか？

CSS
1.slider .slick-slide:not(.slick-active)

投稿2021/06/14 15:57

runnynose

総合スコア497

reiko_y

2021/06/15 07:15

ごめんなさい。貼り付け間違いでした。改めて、質問自体を編集しました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

スライドショーのcenterの画像を２枚にした場合、両サイドの画像を半透明にしたい。

対応内容

関連した質問