0

I have a simple swiper.js slider with 3/4 slides.

             <section id="gallery">
                <div class="swiperGallery">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="galleryImgWrapper" id="uno"></div>
                        </div>
                        <div class="swiper-slide">
                            <div class="galleryImgWrapper" id="due"></div>
                        </div>
                        <div class="swiper-slide">
                            <div class="galleryImgWrapper" id="tre"></div>
                        </div>
                  </div>

I set images as "galleryImgWrapper" background-images. This is the css and the swiper instance

 var swiperGallery = new Swiper('.swiperGallery', {
    speed: 600,
        slidesPerView: 1,
        navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
  })

The css

   .swiper-container, .swiperGallery{
        width: 100%;
        height: 100vh;
    }
    .swiperGallery{
        
        height: 600px;
    }
    #uno{
    background-position-x: 40%;
    background-image: url("http://localhost/sito_campo_padel/assets/img/800w/gallery1.jpg");
}
#due{
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: 99%;
    background-image: url("http://localhost/sito_campo_padel/assets/img/800w/gallery2.jpg");
}
#tre{
    background-size: cover;
    
    background-position-x: 70%;
    background-image: url("http://localhost/sito_campo_padel/assets/img/2000w/gallery3.jpg");
}

This is drivin me crazy because happens only on mobile. The other slides are not hidden and the browser renders them, so my html document is as wide as the .swiper-wrapper.

EDIT: the only way I can make it work is by giving to html the overflow-x:hidden, but this seems a little cheaty, I'd like to know what's wrong with swiper, because I encountered this problems a few times in recent past.

Thank you all.

Aryost
  • 1
  • 1
  • Does this helps ? https://stackoverflow.com/questions/53022091/why-javascript-sliders-break-my-css-flex-layout/53022198#53022198 – Raphaël Balet Feb 22 '22 at 16:00
  • Does this answer your question? [Why Javascript sliders break my css flex layout?](https://stackoverflow.com/questions/53022091/why-javascript-sliders-break-my-css-flex-layout) – Raphaël Balet Feb 22 '22 at 16:01

0 Answers0