I'm trying to get my swiper to look like this, with the active slide centered and the previous and next slide showing a little bit on the side.

However, I don't know how can I change the width of the slides and keep the slides centered

=/index.html

.box {
  max-width: 1440px;
  display: flex;
  height: 500px;
  margin: 0 auto;
  overflow: hidden;
}
.box .banner-swiper {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}
.box .swiper-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.box .swiper-wrapper .prev-slide,
.box .swiper-wrapper .next-slide {
  opacity: 0.4;
}
.box .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}
.box .swiper-slide {
  width: 1000px;
}
.box .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.box .navigation {
  display: block;
  position: absolute;
  width: 120px;
  height: 56px;
  z-index: 50;
  bottom: 16px;
  right: 236px;
}
.box .navigation .previous {
  margin-right: 8px;
}
.box .navigation .previous,
.box .navigation .next {
  width: 56px;
  height: 56px;
  background-color: #424142;
}
.box .navigation .previous i,
.box .navigation .next i {
  color: white;
}

I'm trying to get my swiper to look like this, with the active slide centered and the previous and next slide showing a little bit on the side.

However, I don't know how can I change the width of the slides and keep the slides centered

https://codesandbox.io/s/empty-wind-yxj67v?file=/index.html

.box {
  max-width: 1440px;
  display: flex;
  height: 500px;
  margin: 0 auto;
  overflow: hidden;
}
.box .banner-swiper {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}
.box .swiper-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.box .swiper-wrapper .prev-slide,
.box .swiper-wrapper .next-slide {
  opacity: 0.4;
}
.box .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}
.box .swiper-slide {
  width: 1000px;
}
.box .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.box .navigation {
  display: block;
  position: absolute;
  width: 120px;
  height: 56px;
  z-index: 50;
  bottom: 16px;
  right: 236px;
}
.box .navigation .previous {
  margin-right: 8px;
}
.box .navigation .previous,
.box .navigation .next {
  width: 56px;
  height: 56px;
  background-color: #424142;
}
.box .navigation .previous i,
.box .navigation .next i {
  color: white;
}

• javascript
• html
• css
• swiper.js

3 Answers 3

After inspecting, an inline style overwrites your .box .swiper-slide {width} property. If you wish to explicitly make the slide 1000px, use !important.

I would suggest at least using a more responsive approach. If the slider will span across the screen consider using 75vw as a measurement.

Just in case anyone is like me and is struggling with this too, i thought I'd share my solution. I wanted to do exactly what the original poster was trying to do, have slides at a set max width (in my case within Bootstrap's container widths), centred and looped.

My solution was to place the slider in a div with .container (Bootstrap sets a max-width of 1320px) and set overflow: visible on the .swiper. I then wrapped all of this in a div with .container-fluid, so essentially 100% of the screen and set overflow: hidden. This was working great but the slides weren't looping properly, when I got the end of the slides, a white space would appear. The final piece of the puzzle was setting slidesPerView: 1.0001, allowing swiper to properly configure my loop but it's such a small number that it's not visible to the eye. A bit hacky but I spent wayyyy too long trying to get it work.

Here's it all together:

HTML:

 <div class="container-fluid overflow-hidden g-0">
        <div class="container">
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        slide 1
                    </div>
                    <div class="swiper-slide">
                        slide 2
                    </div>
                    <div class="swiper-slide">
                        slide 3
                    </div>
                    <div class="swiper-slide">
                        slide 4
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS:

.swiper {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
}

JS:

var swiper = new Swiper(".swiper", {
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    slidesPerView: 1.0001,
    centeredSlides: true,
    loop: true,
});

You can set slidesPerView={3} and set negative margin for swiper container.