How to make a custom slider (carousel) outside the container?

Question

css

I am learning to type. I can't figure out how the slider is implemented (in the attached image): it obviously goes beyond the container and displays images in a non-standard way. There are 3 images in total. I use the swiper plugin, is it possible to do it with its help (and how?) or do I need a different solution?

Answer 1

This is the standard in swiper

.swiper-container {
  overflow: hidden;
}

you have to do it

.swiper-container {
  overflow: visible;
}

and add to the parent

.slider {
  overflow: hidden;
}

<div class="slider">
  <div class="slider__container swiper-container">
    <div class="slider__list swiper-wrapper">
      <div class="slider__item swiper-slide">Slide 1</div>
      <div class="slider__item swiper-slide">Slide 2</div>
      <div class="slider__item swiper-slide">Slide 3</div>
    </div>
  </div>
</div>