karuzela z perspektywą

pytanie zadane 17 maja w HTML i CSS przez new_user Użytkownik (640 p.)

witam, chciał bym zrobić karuzelę aby slajdy wyglądały jak tutaj na obrazku, wykorzystuje do tego swipera ale nie wiem jak zrobić aby to podobnie wyglądało, dzięki za pomoc.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

  <!-- Demo styles -->
  <style>

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      padding: 40px;
    }

    .swiper-slide{
        transform-style: preserve-3d;
        transform: perspective(700px) rotateY(15deg) !important;
    }

    .swiper-slide div{
        height: 100%;
        background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
        box-shadow: 0px 0px 24px 0px rgba(66, 68, 90, 1);
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    body {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .container {
        width: 1500px;
        height: 800px;
        padding: 80px;
        background-image: url(./04_Image_InstaPostAesthetic.webp);
        background-size: cover;
        background-repeat: no-repeat;
    }



  </style>

</head>

<body>
  <!-- Swiper -->
  <div class="container">
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><div>Slide 1</div></div>
          <div class="swiper-slide"><div>Slide 2</div></div>
          <div class="swiper-slide"><div>Slide 3</div></div>
          <div class="swiper-slide"><div>Slide 4</div></div>
          <div class="swiper-slide"><div>Slide 5</div></div>
          <div class="swiper-slide"><div>Slide 6</div></div>
          <div class="swiper-slide"><div>Slide 7</div></div>
          <div class="swiper-slide"><div>Slide 8</div></div>
          <div class="swiper-slide"><div>Slide 9</div></div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
  </div>


  <!-- Swiper JS -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
        loop: true,
      slidesPerView: 3,
      spaceBetween: 30,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });
  </script>
</body>

</html>

2 odpowiedzi

odpowiedź 17 maja przez Panelinio Stary wyjadacz (10,450 p.)

odpowiedź 28 maja przez VBService Ekspert (256,320 p.)
edycja 28 maja przez VBService

IMO za pomocą samego css-a, chyba nie da się tego osiągnąć, bo przy każdej akcji (event) slajdy są na nowo renderowane, co skutkuje nadpisywaniem, usuwaniem już istniejących styli.

Sprawdź np. taki zapis

var swiper = new Swiper(".mySwiper", {
            loop: true,
            slidesPerView: 3,
            spaceBetween: 30,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            on: {
                init: function () {
                    document.querySelector('.swiper-wrapper').style.transformStyle = 'preserve-3d';
                    document.querySelector('.swiper-wrapper').style.transform = 'perspective(90vw) rotateY(15deg)';
                },
            },
        });

dodaje on dodatkową stylizację po pierwszym renderingu kart, wykonanie jakiejkolwiek akcji (przesunięcie slajdów) usuwa to ustawienie.

Bardziej bym szukał rozwiązania we właściwościach obiektu Swiper a dokładniej chodzi o: effect

Sprawdź pełny kod przykładu on-line.

var swiper = new Swiper( '.swiper-container.two', {
  pagination: '.swiper-pagination',
  paginationClickable: true,
  effect: 'coverflow',
  loop: true,
  centeredSlides: true,
  slidesPerView: 'auto',
  coverflow: {
    rotate: 0,
    stretch: 100,
    depth: 150,
    modifier: 1.5,
    slideShadows : false,
  }
});

effect: 'coverflow'