- "cube"(方块)
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Effects 切换效果 </title>
- <link rel="stylesheet" href="http://www.swiper.com.cn/dist/CSS/swiper.min.css">
- <style>
- .swiper-container {
- width: 400px;
- height: 400px;
- }
- img {
- width: 100%;
- }
- </style>
- </head>
- <body>
- <div class="swiper-container">
- <div class="swiper-wrapper">
- <div class="swiper-slide"><img src="http://n.sinaimg.cn/collect/crawl/20160314/IOCK-fxqhwtu7729972.jpg" alt=""></div>
- <div class="swiper-slide"><img src="http://n.sinaimg.cn/collect/crawl/20160314/waAj-fxqhmve9176699.jpg" alt=""></div>
- <div class="swiper-slide"><img src="http://n.sinaimg.cn/collect/crawl/20160314/q22A-fxqhwtu7729974.jpg" alt=""></div>
- </div>
- <div class="swiper-pagination"></div>
- <div class="swiper-button-prev"></div>
- <div class="swiper-button-next"></div>
- </div>
- <script src="http://www.swiper.com.cn/dist/js/swiper.min.js"></script>
- <script>
- var mySwiper = new Swiper('.swiper-container',{
- loop: true,
- autoplay: 2500,
- pagination: '.swiper-pagination',
- nextButton: ".swiper-button-next",
- prevButton: ".swiper-button-prev",
- autoplayDisableOnInteraction: false,
- effect: "cube",
- });
- </script>
- </body>
- </html>
- cube
评论
0
喜欢
0
赞
0
评论 ( 0 )
走你
来源: http://www.qdfuns.com/article/35646/0db719660a3cff26d024de0d50cabce8.html