質問: jQueryプラグインの「Owl Carousel」のスライダーを使用して添付画像のように、 画像の上に例えばcssで作成した画像(backgroud-color)を透過(opacity)して、 画像の上に乗せて、中央画像は一番明るく、その両サイドは少し暗くしていく、 さらに、一番両端は、グラデーションさせる。 というデザインにカスタマイズしたいのですが、 画像は動いているので、どうやったらよいのか分かりません。 jsを使って、一番中央にはaのclass、その両サイドはbのclassを付けるなどの jsを作れば良いのかなと思ってはいるのですが、js初心者なので、作成が困難な状態です。。 さらに一番両端画像はグラデーションさせる、これもよく分かりません。 **[追記]一番両端画像(6,7)はグラデーションしていない画像になっている** **最終的に出来れば画像その物もグラデーションさせたいです(徐々に透過)** js初心者なので、もし可能でしたらjsを記述したものを作っていただけると幸いです。 一番両端画像のフェードアウトさせる部分も。 jsじゃなくて、もっと良い方法があるよ!って方は、その方法を教えていただけると幸いです。 よろしくお願い致します。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/8582e3259c3013cd28cfa8fd3f0ecd73.png) ### 該当のソースコード ``` ```
回答: 数が決まっているなら。 ``` .owl-item img { /* 左端用 */ opacity: .5; } .owl-item + .active img { /* 1番目 */ opacity: .6; } .owl-item + .active + .active img { /* 2番目 */ opacity: .7; } .owl-item + .active.center img { /* 中央 */ opacity: 1; } .owl-item + .active.center + .active img { /* 4番目 */ opacity: .7; } .owl-item + .active.center + .active img { /* 5番目 */ opacity: .6; } .owl-item + .active.center + .active + .owl-item img { /* 6番目 */ opacity: .5; } ```