CSS + swiper.js： 3D Responsive Slider

| Jul 5, 2021 min read

最近看到YouTube的影片是製作一個3D Responsive Slider 2的效果，裡面直接使用swiper.js + CSS，呈現出來感覺很不錯就試試看了。

基本上用官方程式範例先做個記錄，以後或許會加到網站中XD

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
    <link rel="stylesheet" type="text/css" href="styles.css">

</head>
<body>
    <!-- Power by https://swiperjs.com/demos#effect-coverflow -->

    <!-- Swiper -->
    <div class="swiper-container mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
            <a href="#"><img src="https://swiperjs.com/demos/images/nature-1.jpg" /></a>
        </div>
        <div class="swiper-slide">
            <a href="#"><img src="https://swiperjs.com/demos/images/nature-2.jpg" /></a>
        </div>
        <div class="swiper-slide">
          <a href="#"><img src="https://swiperjs.com/demos/images/nature-3.jpg" /></a>
        </div>
        <div class="swiper-slide">
            <a href="#"><img src="https://swiperjs.com/demos/images/nature-4.jpg" /></a>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".mySwiper", {
        effect: "coverflow",
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: "auto",
        coverflowEffect: {
          rotate: 50,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows: true,
        },
        pagination: {
          el: ".swiper-pagination",
        },
        loop: true,
        autuplay: {
            delay: 100,
            disableOnInteraction: false,
        }
      });
    </script>
</body>
</html>
  • { margin: 0; padding: 0; }

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

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

.swiper-container { width: 100%; padding-top: 50px; padding-bottom: 50px; }

.swiper-slide { background-position: center; background-size: cover; width: 300px; height: 300px; }

.swiper-slide img { display: block; width: 100%; }


Refer
-----

*   [Responsive Touch Slider Using Html CSS & Swiper.js | 3D Responsive Slider 2 - YouTube](https://www.youtube.com/watch?v=kX6MLRc_Qmg)
*   [Swiper Demos (swiperjs.com)](https://swiperjs.com/demos#effect-coverflow)
comments powered by Disqus