CODEWITHSUNDEEP
javascriptjquerycssswiper.js
XD4
XD4

Reputation: 133

Swiper JS Slides not Sliding all the way the left

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: View of Slider before clicking navigation

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

View of slider after clicking navigation

Thank you!

Upvotes: 8

Views: 17378

Answers (2)

David Ferreira
David Ferreira

Reputation: 1756

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.

Upvotes: 0

Nexo
Nexo

Reputation: 2321

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.

Upvotes: 1

Related Questions