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

Css – How to have white gradient on the side with React and Swiper js

I’m using React.js and swiper.js (https://swiperjs.com/)

Right now the swiper looks like this (https://codesandbox.io/s/swiper-react-forked-hkjwql?file=/src/index.js)

enter image description here

I wanna have white gradient on the side like this exemple. I tried to use CSS but it doesn’t work at all (https://codepen.io/studiojvla/pen/qVbQqW)
enter image description here

Here’s my code

My swiper component

 <Swiper
        spaceBetween={30}
        loop={true}
        slidesPerView={6}
        centeredSlides={true}
        speed={2000}
        navigation={false}
        modules={[Autoplay]}
        grabCursor={true}
        autoplay={{
          delay: 500,
          disableOnInteraction: false
        }}
      >
        {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item) => {
          return (
            <SwiperSlide
              key={item}
              style={{
                width: "100px",
                height: "100px",
                background: "red"
              }}
            >
              <div>{item}</div>
            </SwiperSlide>
          );
        })}
      </Swiper>

How can I have this?

Tags:

2

Answers


  1. 0

    You can achieve that effect by applying these styles (copied from the Codepen) to your swiper-container element:

    .swiper-container {
  position: relative;
}
.swiper-container::before,
.swiper-container::after {
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 100px;
  position: absolute;
  width: 200px;
  z-index: 2;
}
.swiper-container::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.swiper-container::before {
  left: 0;
  top: 0;
}

    You can see here the updated example.

    Login or Signup to reply.
  2. 0

    I forked your example: https://codesandbox.io/s/swiper-react-forked-4p9dwx?file=/src/index.js

    You can use two absolute divs to simulate your background gradient.

    You can use it in combination with pointer-events: none; to allow dragging through the divs.

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

Back To Top
Search