CSS + swiper.js： 3D Responsive Slider
最近看到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%;
}