官網例子：使用iframe來在同一個頁面裡面加入了很多各種不同的示範 http://www.idangero.us/sliders/swiper/demos.php
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Demo</title> <link rel="stylesheet" href="css/idangerous.swiper.css"> <style>/* Demo Styles */body { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.5;}.swiper-container { width: 640px; height: 250px; color: #fff; text-align: center;}.red-slide { background: #ca4040;}.blue-slide { background: #4390ee;}.orange-slide { background: #ff8604;}.green-slide { background: #49a430;}.pink-slide { background: #973e76;}.swiper-slide .title { font-style: italic; font-size: 42px; margin-top: 80px; margin-bottom: 0; line-height: 45px;}.swiper-slide p { font-style: italic; font-size: 25px;}.pagination { position: absolute; z-index: 20; left: 10px; bottom: 10px;}.swiper-pagination-switch { display: inline-block; width: 8px; height: 8px; border-radius: 8px; background: #555; margin-right: 5px; opacity: 0.8; border: 1px solid #fff; cursor: pointer;}.swiper-active-switch { background: #fff;} </style></head><body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide red-slide"> <div class="title">Free Mode</div> <p>has no fixed positions</p> </div> <div class="swiper-slide blue-slide"> <div class="title">Fluid-Mode Enabled</div> <p>When you release the slide, it keep moving for a while</p> </div> <div class="swiper-slide orange-slide"> <div class="title">Slide 3</div> <p>Keep swiping</p> </div> <div class="swiper-slide green-slide"> <div class="title">Slide 4</div> <p>Keep swiping</p> </div> <div class="swiper-slide pink-slide"> <div class="title">Slide 5</div> <p>The last one</p> </div> </div> <div class="pagination"></div> </div> <script src="js/jquery-1.10.1.min.js"></script> <script src="js/idangerous.swiper-2.1.min.js"></script> <script> var mySwiper = new Swiper('.swiper-container',{ pagination: '.pagination', paginationClickable: true, freeMode: true, freeModeFluid: true }) </script></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
