Question 303387 in Html Question posted in
Some basic documentation can be found here.

Html – Swiperjs issue with pictures

I’m attempting to develop a new version of my website with a large picture slider, using SwiperJS. Unfortunately, I’ve encountered an issue while working with the images in this slider.
As you can observe on this CodePen, I’m struggling to display my images side by side with only the gutter space in between.
Instead, there’s always a large space after each photo, highlighted with an orange background.

Here is the code snippet for the slider in my website :

var swiper = new Swiper(".mySwiper", {
    slidesPerView: "auto",
    spaceBetween: 30,
    grabCursor: true,
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
  });
* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

.content {
    background-color: blue;
}

.swiper {
    width: 100%;
    height: 94vh;
    max-height: 1400px;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: orange;
}

.swiper-slide img {
    display: block;
    height: 100%;
}
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8" />
    <title>Photographies - Alan Renault</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href=" https://cdn.jsdelivr.net/npm/[email protected]/swiper-bundle.min.css " rel="stylesheet">     
    

</head>
    <body>
    
            <div class="content">

                <!-- Slider main container -->
                <div class="swiper mySwiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="https://alanrenault.com/gallery/photographies/ALR_9386.jpg"/></div>
                        <div class="swiper-slide"><img src="https://alanrenault.com/gallery/photographies/ALR_8940.jpg"/></div>
                        <div class="swiper-slide"><img src="https://alanrenault.com/gallery/photographies/ALR_8888.jpg"/></div>
                        <div class="swiper-slide"><img src="https://alanrenault.com/gallery/photographies/ALR_7940.jpg"/></div>
                        <div class="swiper-slide"><img src="https://alanrenault.com/gallery/photographies/ALR_7317.jpg"/></div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
      
            </div>

        <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    </body>
</html>

Here is the result I try to achieve :
Illustration

Do you have any suggestions on how to resolve this issue?

Thank you in advance for your help.

I’ve tried manipulating the .swiper-slide class in the CSS, but it consistently results in a malfunctioning slider.

Tags:

2

Answers


  1. 0

    because the .swiper container has no set width. And as a result the slide is taking the whole width of the parent-container.

    If you for example set the width of .swiper to 100vw and change slidesPerView: "auto", to slidesPerView: 2, you will see something more like your design.

    Please also note that it is always easier to answer your questions with code directly in your question, as a working snippet for example. Hope this helped

    Login or Signup to reply.
  2. 0

    Play wit height, slidesPerViev, etc. and adjust how you need.

    var swiper = new Swiper(".mySwiper", {
    slidesPerView: "1.5",
    spaceBetween: 20,
    grabCursor: true,
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
  });
    * {
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        .content {
            background-color: white;
        }

        swiper {
            width: 100%;
            height: 60vh;
            max-height: 1400px;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: white;
           
        }

        .swiper-slide img {
            display: block;
            width: 100%;
            height: auto;
        }
    <link href=" https://cdn.jsdelivr.net/npm/[email protected]/swiper-bundle.min.css " rel="stylesheet"> 
<div class="content">

                <!-- Slider main container -->
                <div class="swiper mySwiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="https://alanrenault.com/gallery/photographies/ALR_9386.jpg"/></div>
                        <div class="swiper-slide"><img src="https://alanrenault.com/gallery/photographies/ALR_8940.jpg"/></div>
                        <div class="swiper-slide"><img src="https://alanrenault.com/gallery/photographies/ALR_8888.jpg"/></div>
                        <div class="swiper-slide"><img src="https://alanrenault.com/gallery/photographies/ALR_7940.jpg"/></div>
                        <div class="swiper-slide"><img src="https://alanrenault.com/gallery/photographies/ALR_7317.jpg"/></div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
      
            </div>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search