Swiper JS Slides not Sliding all the way the left

Question

I'm having a little trouble with my Swiper JS slider. I would like the slides to start at the left and slide all the way to the left on each click. Right now the last slide just comes into view but doesn't end at the left of the container. Anyone know if that's possible and what settings I would use to achieve that?

I have tried setting loop:true but this centres my first slide and displays a partial at the left that I don't want at the beginning.

My JS:

const swiper = new Swiper('.swiper-container', {

  initialSlide: 0,
  slidesPerView: 1.8,
  centeredSlides: false,

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

});

My CSS

 .swiper-container {
                        width: 100%;
                        height: 100%;
                        min-height: 500px;
                      }

                      .swiper-slide {
                        text-align: center;
                        font-size: 18px;

                        /* Center slide text vertically */
                        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;
                      }

                      .swiper-slide img {
                        display: block;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                      }

                      .swiper-slide {
                        width: 40%;
                        flex-shrink: 0;
                        /*padding-right: 10%;*/
                      }

                      .swiper-slide article {
                        border: solid 1px red;
                        width: 100%;
                        height: 100%;
                        margin-right: 10%;
                      }

I am more or less trying to achieve the same effect as the first slider on this site:https://iti.ca/en/

Slider in Start Position:

Slider after clicking navigation arrow. (there are only two slides but slide 2 does not move to the far left)

Thank you!

Danilodanio

Answer 1

If you want to swipe more than one slide or a group of slides, Then you should use the swiper js option of slidesPerGroup: 3,(number of slide you want to move) here is the demo on swiperjs page.

So Now, if this time I got you than you can set options of swiper slider slidesPerView: "auto" Hope this will help you.

Photobathic

No actually, I only want to swipe 1 slide at a time I just want each slide to move all the way to the left. Right now the last slide comes into view but doesn't end at the far left. – Danilodanio

Could you try this two options slidesPerView: "auto",centeredSlides: true? – Photobathic

I tried that but that centres the first slide, which I don't want and makes the slides smaller so the 2nd slide is not coming in from off the page which is also not the goal. – Danilodanio

just use slidesPerView: "auto" as that's what they also used in their js. – Photobathic

I tried this. This still doesn't result in the last slide ending all the way to the left. It just slides into view but doesn't end in the start position of the slider. – Danilodanio

Ok adding slidesPerView: "auto" together with loop: true solved the problem! – Danilodanio

Answer 2

A workaround is to add some empty Swiper slides at the end and prevent sliding to them setting allowSlideNext to false when the active slide index is the real last slide index.

Lindane