• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

karuzela z perspektywą

Object Storage Arubacloud
+1 głos
107 wizyt
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

0 głosów
odpowiedź 17 maja przez Panelinio Dyskutant (7,650 p.)

Co dokładnie chciałbyś zrobić? Jeśli chodzi o działanie to wszystko działa jak należy.

W temacie wyglądu - potrzebujesz skonfigurować CSS'a. Zmieniasz kolor tła, w divy slidera wstawiasz zdjęcia. Będziesz pewnie jeszcze potrzebował tej ramki telefonu.

Przejrzyj tutorial, z którego wszystko brałeś i na przyszłość staraj się trzymać języki w osobnych plikach wink

0 głosów
odpowiedź 28 maja przez VBService Ekspert (254,880 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'

Podobne pytania

+1 głos
1 odpowiedź 114 wizyt
0 głosów
0 odpowiedzi 163 wizyt
pytanie zadane 22 września 2017 w JavaScript przez Bakr Mądrala (6,850 p.)
0 głosów
0 odpowiedzi 309 wizyt
pytanie zadane 2 sierpnia 2017 w JavaScript przez ShadoWs Bywalec (2,800 p.)

92,762 zapytań

141,686 odpowiedzi

320,498 komentarzy

62,106 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...