auxui 的轮播图插件，取材于Swiper2.x ，我们只是简单的封装，更多文档请参阅 Swiper2.x 官方文档：http://2.swiper.com.cn/api/index.html

需要加载swiper模块，可通过下列方式加载

//加载模块 auxui(['swiper'], function (swiper){ //加载后执行一些动作和事件处理 var mySwiper = new swiper('.swiper-container',{ paginationClickable: true }); });

jQuery方式

//加载模块 auxui(['swiper'], function (){ $('.swiper-container').swiper({ paginationClickable: true }); });

实例

屏幕自适应

<!-- html --> <div class="swiper-container swiper1" style="height: 220px;"> <div class="swiper-wrapper"> <div class="swiper-slide red-slide" style="background: #CA4040;color:#fff;"> <div class="title" style="font-size: 30px;text-align: center;">Slide 1</div> </div> <div class="swiper-slide blue-slide" style="background: #4390EE;color:#fff;"> <div class="title" style="font-size: 30px;text-align: center;">Slide 2</div> </div> <div class="swiper-slide orange-slide" style="background: #FF8604;color:#fff;"> <div class="title" style="font-size: 30px;text-align: center;">Slide 3</div> </div> <div class="swiper-slide green-slide" style="background: #49A430;color:#fff;"> <div class="title" style="font-size: 30px;text-align: center;">Slide 4</div> </div> </div> <div class="swiper-pagination" style=""></div> </div> <!-- js --> <script type="text/javascript"> auxui(['swiper'], function (){ $('.swiper-container').swiper({ pagination: '.swiper-pagination', paginationClickable: true }); }); </script>

纵向滑动（上下滑动）

<!-- html --> <div class="swiper-container swiper2" style="height: 220px;"> <div class="swiper-wrapper"> <div class="swiper-slide red-slide" style="background: #FF8604;color:#fff;"> <div class="title" style="font-size: 30px;text-align: center;">Slide 1</div> </div> <div class="swiper-slide blue-slide" style="background: #4390EE;color:#fff;"> <div class="title" style="font-size: 30px;text-align: center;">Slide 2</div> </div> <div class="swiper-slide orange-slide" style="background: #CA4040;color:#fff;"> <div class="title" style="font-size: 30px;text-align: center;">Slide 3</div> </div> <div class="swiper-slide green-slide" style="background: #49A430;color:#fff;"> <div class="title" style="font-size: 30px;text-align: center;">Slide 4</div> </div> </div> <div class="swiper-pagination" style="position: absolute; z-index: 20; left: 10px; top: 10px;"></div> </div> <!-- js --> <script type="text/javascript"> auxui(['swiper'], function (){ $('.swiper-container').swiper({ pagination: '.swiper-pagination', paginationClickable: true, mode: 'vertical' }); }); </script>

free 模式

<!-- html --> <div class="swiper-container swiper3" style="height: 220px;"> <div class="swiper-wrapper"> <div class="swiper-slide red-slide" style="background: #973E76;color:#fff;"> <div class="title" style="font-size: 30px;text-align: center;">Slide 1</div> </div> <div class="swiper-slide blue-slide" style="background: #4390EE;color:#fff;"> <div class="title" style="font-size: 30px;text-align: center;">Slide 2</div> </div> <div class="swiper-slide orange-slide" style="background: #CA4040;color:#fff;"> <div class="title" style="font-size: 30px;text-align: center;">Slide 3</div> </div> <div class="swiper-slide green-slide" style="background: #49A430;color:#fff;"> <div class="title" style="font-size: 30px;text-align: center;">Slide 4</div> </div> </div> <div class="swiper-pagination" style=""></div> </div> <!-- js --> <script type="text/javascript"> auxui(['swiper'], function (){ auxui(['swiper'], function (){ $('.swiper-container').swiper({ pagination: '.swiper-pagination', paginationClickable: true, freeMode: true, freeModeFluid: true }); }); }); </script>

Carousel 效果

<!-- html --> <div class="swiper-container swiper4" style="height: 220px;"> <div class="swiper-wrapper"> <div class="swiper-slide red-slide" style="background: #FF8604;color:#fff;"> <div class="title" style="font-size: 30px;text-align: center;">Slide 1</div> </div> <div class="swiper-slide blue-slide" style="background: #4390EE;color:#fff;"> <div class="title" style="font-size: 30px;text-align: center;">Slide 2</div> </div> <div class="swiper-slide orange-slide" style="background: #CA4040;color:#fff;"> <div class="title" style="font-size: 30px;text-align: center;">Slide 3</div> </div> <div class="swiper-slide green-slide" style="background: #49A430;color:#fff;"> <div class="title" style="font-size: 30px;text-align: center;">Slide 4</div> </div> <div class="swiper-slide green-slide" style="background: #973E76;color:#fff;"> <div class="title" style="font-size: 30px;text-align: center;">Slide 4</div> </div> <div class="swiper-slide green-slide" style="background: #FF8604;color:#fff;"> <div class="title" style="font-size: 30px;text-align: center;">Slide 4</div> </div> <div class="swiper-slide green-slide" style="background: #49A430;color:#fff;"> <div class="title" style="font-size: 30px;text-align: center;">Slide 4</div> </div> </div> <div class="swiper-pagination" style=""></div> </div> <!-- js --> <script type="text/javascript"> auxui(['swiper'], function (){ $('.swiper-container').swiper({ pagination: '.swiper-pagination', paginationClickable: true, slidesPerView: 3 }); }); </script>

Carousel+循环

<!-- html --> <div class="swiper-container swiper5" style="height: 220px;"> <div class="swiper-wrapper"> <div class="swiper-slide red-slide" style="background: #FF8604;color:#fff;"> <div class="title" style="font-size: 30px;text-align: center;">Slide 1</div> </div> <div class="swiper-slide blue-slide" style="background: #4390EE;color:#fff;"> <div class="title" style="font-size: 30px;text-align: center;">Slide 2</div> </div> <div class="swiper-slide orange-slide" style="background: #CA4040;color:#fff;"> <div class="title" style="font-size: 30px;text-align: center;">Slide 3</div> </div> <div class="swiper-slide green-slide" style="background: #49A430;color:#fff;"> <div class="title" style="font-size: 30px;text-align: center;">Slide 4</div> </div> <div class="swiper-slide green-slide" style="background: #973E76;color:#fff;"> <div class="title" style="font-size: 30px;text-align: center;">Slide 4</div> </div> <div class="swiper-slide green-slide" style="background: #FF8604;color:#fff;"> <div class="title" style="font-size: 30px;text-align: center;">Slide 4</div> </div> <div class="swiper-slide green-slide" style="background: #49A430;color:#fff;"> <div class="title" style="font-size: 30px;text-align: center;">Slide 4</div> </div> </div> <div class="swiper-pagination" style=""></div> </div> <!-- js --> <script type="text/javascript"> auxui(['swiper'], function (){ $('.swiper-container').swiper({ pagination: '.swiper-pagination', paginationClickable: true, slidesPerView: 3, loop: true }); }); </script>