jQueryプラグインの「Owl Carousel」のスライダーを使用して中心の画像から左右の画像を徐々に暗くしていきたい

Question

jQueryプラグインの「Owl Carousel」のスライダーを使用して添付画像のように、
画像の上に例えばcssで作成した画像(backgroud-color)を透過(opacity)して、
画像の上に乗せて、中央画像は一番明るく、その両サイドは少し暗くしていく、
さらに、一番両端は、グラデーションさせる。
というデザインにカスタマイズしたいのですが、
画像は動いているので、どうやったらよいのか分かりません。
jsを使って、一番中央にはaのclass、その両サイドはbのclassを付けるなどの
jsを作れば良いのかなと思ってはいるのですが、js初心者なので、作成が困難な状態です。。
さらに一番両端画像はグラデーションさせる、これもよく分かりません。
[追記]一番両端画像(6,7)はグラデーションしていない画像になっている
最終的に出来れば画像その物もグラデーションさせたいです(徐々に透過)

js初心者なので、もし可能でしたらjsを記述したものを作っていただけると幸いです。
一番両端画像のフェードアウトさせる部分も。

jsじゃなくて、もっと良い方法があるよ！って方は、その方法を教えていただけると幸いです。

よろしくお願い致します。

該当のソースコード

<div>
  <div><img src="" alt="画像1"></div>
  <div><img src="" alt="画像2"></div>
  <div><img src="" alt="画像3"></div>
  <div><img src="" alt="画像4"></div>
  <div><img src="" alt="画像5"></div>
  <div><img src="" alt="画像6"></div>
  <div><img src="" alt="画像7"></div>
</div>

Answer 1

数が決まっているなら。

.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;
}

Comments

[shohei77]

ご返答ありがとうございます。
申し訳ございません。質問内容が少し間違っておりました。
画像、テキスト共に修正いたしました。
正しくは一番両端画像(6,7)はグラデーションしていない画像になっており
最終的にグラデーションさせる。
出来れば画像その物もグラデーションさせたいです(徐々に透過)
何か良い方法がございましたら、教えていただけると幸いです。

[kei344]

わかりやすくと思って「opacity」にしているだけで、「CSSで個別に指定できる」という回答です。
当該スライドにそれぞれグラデーションを重ねればよいでしょう。

[shohei77]

ありがとうございます！
そういうことだったんですね、よく理解できていなく申し訳ございません。

あと1点お伺いしたいのですが、
.owl-item + .active.center img
↑この「.center」というクラスは自動(Owl Carouselの機能)で付くものなのでしょうか？
デベロッパーツールで確認したところ、.centerが見当たらなかったので、、、

[kei344]

提示された「Owl Carousel」とは違う可能性もありますが、公式のサンプルっぽい物にそのクラスが付いていたため使用しました。もし無いなら「 + .active + .active + .active」のように繰り返していけばよいです。

[shohei77]

なるほど。
ご丁寧にご説明いただき大変助かりました。
ありがとうございました！