html - 嵌套滑动器的背景图像未显示
问题描述
我为客户网站做了一个嵌套滑动器，但是我遇到了垂直嵌套问题，如果我只使用一个背景图像作为垂直滑动器中的第一张幻灯片，我的滑动器幻灯片中的背景图像会显示，但是当我需要使用至少 3 张图像，它们需要出现在垂直滑动器的每张幻灯片中，并且一旦我为垂直滑动器的第二张幻灯片使用另一个背景图像，两者都变为空白，检查中没有错误或警告element...（我正在使用 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本身已经有一个swiper lib）
解决方案
通过从图像的 url 和 ; 中删除 '' 解决了这个问题 在图像的末尾
推荐阅读
- java - 如何在 Java 中传递带参数的方法引用？
- android - 在 Retrofit Api 请求中使用密码套件有什么好处？
- excel - 从另一个工作簿管理和导入命名范围
- amazon-web-services - 通过 appsync-dynamoDB 解析器将 AWSJSON 添加到 dynamoDB 中的空 Map
- python - 将python模块输出写入toml文件的方法
- apache-camel - 骆驼 - 处理后移动到文件夹
- javascript - Ajax 仅适用于偶数个帖子
- java - 有没有办法使用 Selenium 或其他一些 java API 以编程方式创建新的命名 Firefox 配置文件？
- python - 如何使用包含布尔表达式的字符串创建 PyEDA 布尔表达式？
- r - R Shiny 情节更新分两步而不是一步