Swiper and absolute positioning

Question

I'm trying to create a floating carousel with some background underneath. The carousel is based on Swiper for react.

Here is an example

https://codesandbox.io/p/sandbox/swiper-react-slides-per-view-forked-9l7exy?file=%2Fsrc%2FApp.jsx

if I change the:

<div style={{ position: "static", top: "50px", left: "0px" }}>

to:

<div style={{ position: "absolut", top: "50px", left: "0px" }}>

Then the whole Swiper disappears.

I can try to mimic this with position relative and negative margin (to remove the empty space) but it is a little bit hackish way.

Answer 1

To fix your issue, you need to set a fixed width. You can do this like this:

  <div
    style={{
      position: "absolute",
      top: "50px",
      left: "0px",
      width: "100%",
    }}
  >

Please check to see if this solves your problem.