javascript - Swiper JS Slides not Sliding all the way the left - Stack Overflow

admin管理员组

文章数量:1356755

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 es 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:/

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!

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 es 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!

• javascript
• jquery
• css
• swiper.js

Share Improve this question Follow edited Jul 31, 2021 at 17:45 XD4 asked Jul 31, 2021 at 16:43 XD4XD4 13311 gold badge22 silver badges1111 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

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.

本文标签： javascriptSwiper JS Slides not Sliding all the way the leftStack Overflow