点这里 coverflow 切换
coverflow 切换
coverflow 切换
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>coverflow 切换 </title>
- <link rel="stylesheet" href="http://www.swiper.com.cn/dist/CSS/swiper.min.css">
- <style>
- .swiper-container {
- margin-top: 150px;
- width: 1000px;
- height: 350px;
- }
- .swiper-wrapper {
- width: 900px;
- height: 300px;
- }
- .swiper-slide {
- width: 300px;
- height: 300px;
- line-height: 300px;
- text-align: center;
- font-size: 50px;
- }
- </style>
- </head>
- <body>
- <div class="swiper-container">
- <div class="swiper-wrapper">
- <div class="swiper-slide" style="background: #4390EE;">slide1</div>
- <div class="swiper-slide" style="background: #CA4040;">slide2</div>
- <div class="swiper-slide" style="background: #FF8604;">slide3</div>
- <div class="swiper-slide" style="background: #4390EE;">slide4</div>
- <div class="swiper-slide" style="background: #CA4040;">slide5</div>
- <div class="swiper-slide" style="background: #FF8604;">slide6</div>
- </div>
- <div class="swiper-pagination"></div>
- </div>
- <script src="http://www.swiper.com.cn/dist/js/swiper.min.js"></script>
- <script>
- var swiper = new Swiper('.swiper-container', {
- pagination: '.swiper-pagination',
- effect: 'coverflow',
- grabCursor: true,
- centeredSlides: false,
- slidesPerView: '3',
- coverflow: {
- rotate: 50,
- stretch: 0,
- depth: 100,
- modifier: 1,
- slideShadows : true
- }
- });
- </script>
- </body>
- </html>
评论
0
喜欢
0
赞
0
评论 ( 0 )
走你
来源: http://www.qdfuns.com/article/35646/46b932d3ff5048cbff45258024b20fd2.html