Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Post an Article
Welcome To Ask or Share your Answers For Others

Categories

html - Background image of nested swiper not showing

0 votes
110 views
in Technique[技术] by (71.8m points)

html - Background image of nested swiper not showing

I did a nested swiper for a cliente website, but I am having a problem with the vertical nesting, my backgrounds-images in the swiper slide are showing if I use only 1 background image as the first slide in the vertical swiper, but as I need to use at least 3 images, they need to appear each one in each slide of the vertical swiper, and as soon as I use another background image for the second slide of the vertical swiper, both go blank, no errors or warnings in inspect element... (I am using wordpress with elementor page build)

#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 L

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Solved the issue by removing the '' from the urls of the images and also the ; at the end of the images


与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界，一个免费开放的程序员编程交流平台！开放，进步，分享！让技术改变生活，让极客改变未来！ Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

1.4m articles

1.4m replys

5 comments

57.0k users

Most popular tags

Snow Theme by Q2A Market
Powered by Question2Answer
...