我为一个客户端网站做了一个嵌套的滑动器，但我在垂直嵌套方面遇到了问题，如果我只使用1个背景图像作为垂直滑动器中的第一张幻灯片，则滑动器幻灯片中的背景图像会显示出来，但由于我需要使用至少3个图像，它们需要分别出现在垂直滑动器的每个幻灯片中，当我为垂直滑动器的第二张幻灯片使用另一个背景图像时，两者都变为空白，检查元素中没有错误或警告。。。(我正在使用wordpress与elementor页面构建)
#main-carousel {
position: relative;
margin-top: 0px;
width: 100% !important;
font-family: 'Montserrat';
}
#main-carousel > .swiper-container {
height: 75vh;
}
#main-carousel > .swiper-container .swiper-wrapper .swiper-slide {
width: 100% !important;
}
#main-carousel > .swiper-container .swiper-wrapper .swiper-slide .swiper-wrapper .swiper-slide {
height: calc((100% - 30px) / 2);
}
#main-carousel .swiper-pagination {
z-index: 4;
}
.swiper-pagination-bullet {
background-color: #FFF;
;
width: 10px !important;
height: 10px !important;
transition: var(--time-long);
-webkit-transition: var(--time-long);
-moz-transition: var(--time-long);
}
.swiper-container-v {
height: 100% !imortant;
}
#main-carousel > .swiper-container .swiper-wrapper .swiper-container-v .swiper-wrapper .swiper-slider {
height: 100% !important;
}
#main-carousel > .swiper-container #swipe1 {
width: 50%!important;
}
#main-carousel > .swiper-container #swipe2 {
width: 25%!important;
}
#main-carousel > .swiper-container #swipe3 {
width: 25%!important;
}
#main-carousel > .swiper-container .swiper-wrapper .swiper-slide .slide-grid {
width: 50%;
}
#main-carousel > .swiper-container .swiper-wrapper .swiper-slide.slide-grid.one-slide {
width: 25% !important;
}
#main-carousel .swiper-container .swiper-wrapper .swiper-container-v .swiper-wrapper .swiper-slide{
width: 100%;
}
#main-carousel > .swiper-container .swiper-wrapper .swiper-slide {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
/* ====== Companion ====== */
.companion-image {
display: block;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.companion-image-child {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
transition: var(--time-long);
-webkit-transition: var(--time-long);
-moz-transition: var(--time-long);
z-index: 1;
position: absolute !important;
top: 0;
left: 0;
}
#main-carousel .companion-image-child{
background-size: contain
}
.swiper-slide:hover ,
.swiper-slide:focus {
transform: scale(1.1);
}
.companion-wrapper {
display: block;
position: relative;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.companion-content {
position: absolute;
bottom: 40px;
left: 40px;
z-index: 2;
color: #fff;
}
.companion-content p {
margin-bottom: 0;
}
.companion-name {
text-transform: uppercase;
font-size: 17px;
}
.companion-content .button {
font-size: 16px;
padding: 5px 20px;
margin-top: 20px;
}
.companion-content {
position: absolute !important;
bottom: 40px;
left: 15% !important;
z-index: 2;
}
.swiper-slide {
position: relative !important;
}
.companion-content-hide {
height: 110px;
opacity: 1;
}
.companion-content-hide {
opacity: 0;
height: 0;
transition: var(--time-long);
-webkit-transition: var(--time-long);
-moz-transition: var(--time-long);
}
.swiper-slide:hover .companion-content-hide {
height: 110px;
opacity: 1;
background-image: linear-gradient(to bottom,
}
.swiper-container .companion-content {
text-align: middle !important;
font-size: 15px
}
.companion-content-wrapper{
width: 95%;
}<section id="main-carousel">
<div class="swiper-container swiper-container-h">
<div class="swiper-wrapper">
<div class="swiper-slide" id="swipe1">
<div class="companion-content-wrapper">
<div class="swiper-container swiper-container-v">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="companion-image">
<div class="companion-image-child" id="imagem-1">
</div>
</div>
</div>
<div class="swiper-slide">
<div class="companion-image">
<div class="companion-image-child" id="imagem-2">
</div>
</div>
</div>
<div class="swiper-slide">
<div class="companion-image">
<div class="companion-image-child" id="imagem-3">
</div>
</div>
</div>
</div>
<div class="swiper-pagination swiper-pagination-v">
</div>
</div>
<div class="companion-content">
<b><p class="companion-name">Conviva Itaquá 2</p>
<div class="companion-content-hide">
<p>2 dorms</p>
<p> Vaga de Garagem</p>
<p>Itaquaquecetuba- SP</p>
<a href="<?php the_permalink() ?>" class="button">Saiba Mais</a>
</div></b>
</div>
</div>
</div>
<div class="swiper-slide" id="swipe2">
<div class="companion-content-wrapper">
<div class="swiper-container swiper-container-v">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="companion-image">
<div class="companion-image-child" style=" background-image: url('http://magnificodigital.com/clientes/SitedeTestes/wp-content/uploads/2021/02/001-Portaria-R05.jpg');">
</div>
</div>
</div>
<div class="swiper-slide">
<div class="companion-image">
<div class="companion-image-child" style="background-image:url('http://magnificodigital.com/clientes/SitedeTestes/wp-content/uploads/2021/02/003-Churrasqueira_Alta.jpg');">
</div>
</div>
</div>
<div class="swiper-slide">
<div class="companion-image">
<div class="companion-image-child" style="background-image:url('http://magnificodigital.com/clientes/SitedeTestes/wp-content/uploads/2021/02/005-Alameda_Alta.jpg');">
</div>
</div>
</div>
</div>
<div class="swiper-pagination swiper-pagination-v">
</div>
</div>
<div class="companion-content">
<b> <p class="companion-name">Conviva Mais</p>
<div class="companion-content-hide">
<p>2 dorms</p>
<p> Vaga de Garagem</p>
<p>Nova Iguaçu - RJ</p>
<a href="<?php the_permalink() ?>" class="button">Saiba Mais</a>
</div></b>
</div>
</div>
</div>
<div class="swiper-slide" id="swipe3">
<div class="companion-content-wrapper">
<div class="swiper-container swiper-container-v">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="companion-image">
<div class="companion-image-child" style=" background-image: url('http://magnificodigital.com/clientes/SitedeTestes/wp-content/uploads/2021/02/aratimbo001-1024x753-1.jpg');">
</div>
</div>
</div>
<div class="swiper-slide">
<div class="companion-image">
<div class="companion-image-child" style="background-image:url('http://magnificodigital.com/clientes/SitedeTestes/wp-content/uploads/2021/02/aratimbo002-1024x595-1.jpg');">
</div>
</div>
</div>
<div class="swiper-slide">
<div class="companion-image">
<div class="companion-image-child" style="background-image:url('http://magnificodigital.com/clientes/SitedeTestes/wp-content/uploads/2021/02/aratimbo003-1024x640-1.jpg');">
</div>
</div>
</div>
</div>
<div class="swiper-pagination swiper-pagination-v">
</div>
</div>
<div class="companion-content">
<b><p class="companion-name">Residencial Aratimbó</p>
<div class="companion-content-hide">
<p>2 dorms</p>
<p> Vaga de Garagem</p>
<p>Vila Liviero- SP</p>
<a href="<?php the_permalink() ?>" class="button">Saiba Mais</a>
</div></b>
</div>
</div>
</div>
</div>
</div>
</section>我不知道为什么图像不显示为背景，如果它是一个图像只有就可以了
(elementor本身已经有一个滑动器库)
通过从图像的URL中删除"以及；在图像的末尾