Question 197806 in CSS Question posted in
Some basic documentation can be found here.

Css – SwiperJS keeps adding margin right to each slide

I’m having a Swiper carousel that keeps adding unnecessary margin right (5px) to each slide like this:

enter image description here

I tried

.swiper-slide {
    margin-right: 0px !important;
}

but then the cards do not fit into one frame anymore

enter image description here

The following works temporarily but as soon as I refresh the page the problem re-emerges.

<Swiper
    slidesPerView={1}
    spaceBetween={0} // gets overwritten by SwiperJS?
>
...
</Swiper>

I have run out of ideas on how to fix this, would appreciate any suggestion

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I solved this by using media queries and flex-basis in percentage, combined with margin-right: 0px !important;

    .carousel {
    & .swiper-slide {
        margin-right: 0px !important;
        flex-basis: 20%;
    }

    // fix for box-shadow being cut off
    & .swiper-slide:hover {
        box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.7);
        -webkit-box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.7);
        -moz-box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.7);
    }
}

@media (max-width: 992px) {
  .carousel {
    & .swiper-slide {
      flex-basis: 25%;
    }
  }
}

@media (max-width: 768px) {
  .carousel {
    & .swiper-slide {
      flex-basis: 33.33%;
    }
  }
}

// media queries for other screen widths here

  2. 0

    Swiper has several configuration options that can affect the carousel’s layout. Look for options related to spacing, margins, or padding. For example, the spaceBetween option controls the space between slides, and the slidesPerView option determines how many slides are visible at once. Experiment with different values for these options to see if it resolves the issue.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search