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%;
}
723 則留言
Frankiemef
https://tadalaccess.com/# cialis drug interactions
LorenMep
prices cialis: cialis pill – cialis store in philippines
JosephSom
when will teva’s generic tadalafil be available in pharmacies Tadal Access why is cialis so expensive
JosephSom
does cialis lower your blood pressure buy cipla tadalafil cialis price walgreens
Frankiemef
https://tadalaccess.com/# cialis drug interactions