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

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

新規登録して質問してみよう
ただいま回答率
85.50%
スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2125閲覧

[js] slickスライダー スライドにクラスを付与したい

KAZUHA

総合スコア15

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/05/23 14:40

編集2020/05/23 14:43

前提・実現したいこと

お世話になります。
5枚表示のslickスライダーで両端のスライドだけ透過したいと思っております。
左端は「slick-current」クラスで取得できるのですが
右端の取得の仕方がわからず、困っております。

該当のソースコード

javascript

1 <div class="center"> 2 <div class="kage"><img src="https://www.jungleocean.com/demo/jquery-slick/images/1.jpg" alt=""><p>名前/テスト</p></div> 3 <div class="kage"><img src="https://www.jungleocean.com/demo/jquery-slick/images/2.jpg" alt=""><p>名前/テスト</p></div> 4 <div class="kage"><img src="https://www.jungleocean.com/demo/jquery-slick/images/3.jpg" alt=""><p>名前/テスト</p></div> 5 <div class="kage"><img src="https://www.jungleocean.com/demo/jquery-slick/images/4.jpg" alt=""><p>名前/テスト</p></div> 6 <div class="kage"><img src="https://www.jungleocean.com/demo/jquery-slick/images/5.jpg" alt=""><p>名前/テスト</p></div> 7 <div class="kage"><img src="https://www.jungleocean.com/demo/jquery-slick/images/6.jpg" alt=""><p>名前/テスト</p></div> 8 <div class="kage"><img src="https://www.jungleocean.com/demo/jquery-slick/images/7.jpg" alt=""><p>名前/テスト</p></div> 9 <div class="kage"><img src="https://www.jungleocean.com/demo/jquery-slick/images/8.jpg" alt=""><p>名前/テスト</p></div> 10 </div> 11 12<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 13<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script> 14<script src="slick.min.js"></script> 15<script> 16 $(function() { 17 // 自要素の前を指定 18 $('.slick-current').next().next().next().next().addClass("changed"); 19}); 20</script> 21 <script> 22  $('.center').slick({ 23   arrows: true, 24 slidesToShow:5, 25 slidesToScroll: 1, 26 dots: false, 27centerMode: false, 28 speed: 150, 29  }); 30 </script>

試したこと

javascript

1 $(function() { 2 $('.slick-current').next().next().next().next().addClass("changed"); 3});

これだと、スライダーが動いても付与される個所が変わらないので、困っております。

こちらのURLにテストの状況をアップしております。
http://mogelog.website/slick/
アドバイスいただけますと幸いです。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

.slick-active が表示されているスライドには付くようです。

投稿2020/05/23 14:47

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

KAZUHA

2020/05/23 14:53

ご回答いただきありがとうございます。 .slick-active に透過をつけると 表示領域にある5枚ともが透過されてしまいました。 .slick-active:last-of-type を指定しても反映されないので、新規でclassを付与してあげないといけないのかもしれません。。。
kei344

2020/05/23 15:04

:last-of-typeは兄弟要素の中の最後の要素(の種類)にしか反応しません。(クラスとかは考慮されません) 表示数が固定なら、CSSで処理してみては。 .slick-slide { opacity: .5; } .slick-current, .slick-current + .slick-active, .slick-current + .slick-active + .slick-active { opacity: 1; }
KAZUHA

2020/05/23 15:33

ありがとうございます、教えていただいたcssで思い通りの表現にすることができました。 逆に全体を半透明する発想が思いつきませんでした、大変助かりました。 ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問