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%;
}
1,562 則留言
WilliamPit
http://inpharm24.com/# india pharmacy cialis
MatthewMor
п»їindia pharmacy best online pharmacy in india meds from india
MatthewMor
buy medications online progreso, mexico pharmacy online mexican pharmacy that ships to usa
RandallTew
australian online pharmacy: meijer pharmacy – schnucks pharmacy
Charlesaroca
proventil online pharmacy: provigil mexico pharmacy – pain relief