源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

移动端触屏幻灯片图片切换插件idangerous swiper.js

  • 时间:2021-01-04 05:34 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:移动端触屏幻灯片图片切换插件idangerous swiper.js
强大的移动端触屏幻灯片图片和HTML内容切换插件idangerous swiper,支持自定义左右切换还是上下切换,支持多个分组切换,支持下拉更新切换,支持TAB方式切换等十几种切换效果,支持众多的选项配置,如: speed:切换的速度(毫秒) autoplay:自动播放的速度 mode:切换模式 horizontal(横向) vertical(竖向) loop:是否循环播放true false 如此强大的配置功能,值得使用。 [img]http://files.jb51.net/file_images/article/201704/2017410114758291.jpg?201731011487[/img] [b]使用方法: [/b] 1.加载插件
<link rel="stylesheet" href="path_to_css/idangerous.swiper.css">
<script defer src="path_to_js/idangerous.swiper-2.x.min.js"></script>

2.HTML内容
<div class="swiper-container">
 <div class="swiper-wrapper">
 <!--First Slide-->
 <div class="swiper-slide">
 <!-- Any HTML content of the first slide goes here -->
 </div>
 
 <!--Second Slide-->

 <div class="swiper-slide">
 <!-- Any HTML content of the second slide goes here -->
 </div>
 
 <!--Third Slide-->
 <div class="swiper-slide">
 <!-- Any HTML content of the third slide goes here -->

 </div>
 <!--Etc..-->

 </div>
</div>

3.函数调用
<script type="text/javascript">
window.onload = function() {
 var mySwiper = new Swiper('.swiper-container',{
 //Your options here:
 mode:'horizontal',
 loop: true
 //etc..

 }); 
}
</script>
插件支持jQuery和Zepto,如果使用这两者,请先加载jQuery.js
<script type="text/javascript">
$(function(){
 var mySwiper = $('.swiper-container').swiper({
 //Your options here:
 mode:'horizontal',
 loop: true
 //etc..
 });
});
</script>
源码下载:[url=http://xiazai.jb51.net/201704/yuanma/swiperjs(jb51.net).rar]idangerous swiper.js[/url] 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部