Search code examples
css-positionabsoluteswiper.js

Swiper carousel problem when position absolute

I'm trying to create a loop carousel of items with the swiper carousel but somehow it doesn't work at all. The problem is that carousel must be position absolute so the items will come from the right side of the screen outside of the carousel container. So the final image should look like this:

enter image description here

I see some classes are trying to be changed when clicking the next/prev buttons but the animation is not happening and slides are not actually switching. Here is the actual code of the slider: https://codepen.io/chakachuk/pen/VwMJEwG

Thanks!

Solution

  • Rather than messing with the internals of the carousel, it's probably better (and far, far easier) to simply create another, separate div to represent the "background" of the carousel.

    So get rid of the position: absolute on .themesCarousel and then add something like the following (based on your original code):

    HTML:

    <section class="carouselOuter">
  <div class="carouselBG"></div>
  <div class="col -themesCarousel">
  ...
  </div>
</section>

    CSS:

    section.carouselOuter {
  background-color: skyblue; // change this to your bg image, just there so you can see that it's working...
  position: relative;
}

.carouselBG {
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: 1rem;
  right: 5rem;
  background-color: white;
}

.themesCarousel_next {
  right: 5rem;
}

    Here's a CodePen showing the full thing "working", though you've got some other weird CSS/JS going on here, so your focused carousel item is off, but that was beyond the scope of your question...