В моем WordPress с платформой Bootstrap я хочу, чтобы несколько каруселей располагались друг на друге с различным поведением слайдов. В моем коде ниже у меня есть две карусели в одном container :

1) лежащая в основе карусель с изображениями; .carousel-fade только затухание без скольжения.

2) В position:absolute , карусель второго слоя укладывается на карусель изображения; скользить влево.

 {amp}lt;div class="container-fluid slide-container"{amp}gt; {amp}lt;!-- IMAGE SLIDERS CAROUSEL --{amp}gt; {amp}lt;div class="row slide-images-row"{amp}gt; {amp}lt;div id="carousel-image" class="carousel slide carousel-fade" data-ride="carousel"{amp}gt; {amp}lt;div class="carousel-inner"{amp}gt; {amp}lt;div class="carousel-item active"{amp}gt; {amp}lt;img class="d-block w-100" src="..." alt="First slide"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="carousel-item"{amp}gt; {amp}lt;img class="d-block w-100" src="..." alt="Second slide"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;!-- LAYER SLIDERS CAROUSEL --{amp}gt; {amp}lt;div class="row slide-layer-row"{amp}gt; {amp}lt;div id="carousel-layer" class="carousel slide" data-ride="carousel"{amp}gt; {amp}lt;div class="carousel-inner"{amp}gt; {amp}lt;div class="carousel-item active"{amp}gt; {amp}lt;img class="d-block w-100" src="..." alt="First slide"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="carousel-item"{amp}gt; {amp}lt;img class="d-block w-100" src="..." alt="First slide"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

Я хочу, чтобы .carousel-layer показывали изображение ниже при скольжении (например, здесь: https://themes.muffingroup.com/be/architect5/?utm_source=demos ).

Для этого я использую следующий сценарий BS:

 $('.carousel-layer').on('slide.bs.carousel', function () { $('#carousel-layer .carousel-item img').css('opacity', '0.75'); }); $('.carousel-layer').on('slid.bs.carousel', function () { $('#carousel-layer .carousel-item img').css('opacity', '.15'); }); 

С помощью приведенного выше кода .carousel-layer скользят; просто исчезает

Можно ли этого достичь без img в .carousel-layer с помощью CSS, управляющего цветом фона слоя, или любым другим способом?