swiper 插件制作轮播图的简单配置

最新推荐文章于 2025-02-28 23:17:56 发布

shuffle_boy

最新推荐文章于 2025-02-28 23:17:56 发布

阅读量350

点赞数

分类专栏： javascript 文章标签： js javascript html5 css3

本文章版权归shuffleboy所有，转载请注明出处

本文链接：https://blog.youkuaiyun.com/shuffle_boy/article/details/105388996

版权

javascript 专栏收录该内容

19 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>swiper轮播图</title>
	<script src="https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js"></script>
	<link href="https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet">
	<style>
    *{
    	padding: 0;
    	margin: 0;
    	list-style: none;
    	text-decoration: none;
    }
    .swiper-container {
	    width: 600px;
	    height: 300px;
    }  
	</style>
</head>
<body>
  <div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
	<script>
		var mySwiper = new Swiper ('.swiper-container', {
	    direction: 'horizontal', // 垂直切换选项 默认horizontal，还可选vertical 
	    loop: true, // 循环模式选项
	    initialSlide :2, //设定初始化时slide的索引。
	    speed:1000, //过度速度以毫秒计时默认300
	    //设置宽度为全屏  
      width: window.innerWidth,
      height:300,
      runCallbacksOnInit : false,//是否触发一次 [Transition/SlideChange] [Start/End] 回调函数。如果不想触发，将此设置为false
      simulateTouch : true,//false导致禁止鼠标模拟触摸 默认true
      allowTouchMove: true,//false导致鼠标无法拖动，手机也无法滑动 默认true
      touchAngle:45,//允许触发拖动的角度值。默认45度，即使触摸方向不是完全水平也能拖动slide。
      wraperClass:'my-wrapper',//默认：swiper-wrapper
      // slideClass : 'my-slide',// 每个图片框的类名 默认：swiper-slide
      // slideActiveClass : 'swiper-slide-active',//选中的当前图片框 默认：swiper-slide-active
      // slideNextClass : 'my-slide-next',//选中的图片框下一个的类名默认：swiper-slide-next
      // slidePreClass : 'my-slide-pre',//选中的图片框上一个的类名默认：swiper-slide-pre
      
      
      /*//设置断点宽度 高度
      breakpoints: {
        1024: {
          width: 500,
          height:200
        },
        768: {
          width: undefined,//取消width，恢复自适应
          height: undefined,//取消height，恢复自适应
      },*/
      //窗口缩放时设置width height
      
      on: {
       resize: function(){
         this.params.width = window.innerWidth;
         this.params.height = window.innerHeight;
         this.update();
       },
     //   slideChangeTransitionStart:function(){
		   //   alert('触发了回调');
		   // },
    } ,
	    // 如果需要分页器
	    pagination: {
	    	el: '.swiper-pagination',
	    	clickable :true,
	    	// bulletClass : 'my-bullet',//每个小点点的类名 默认：swiper-pagination-bullet
	    	// bulletActiveClass: 'my-bullet-active',选中当前小点点的类名 默认：swiper-pagination-bullet-active
	    },
	    
	    // 如果需要前进后退按钮
	    navigation: {
	    	nextEl: '.swiper-button-next',//右箭头类名 默认：null
	    	prevEl: '.swiper-button-prev',//左键头类名 默认：null
	    },
	    //是否自动切换
	    autoplay:{
        delay:1000,//切换间隔时间
        disableOnInteraction: false,//用户操作swiper之后，是否禁止autoplay。默认为true：停止,操作包括触碰，拖动，点击pagination等。
	    },
	    //切换效果
	    effect:'slide', //默认为"slide"（位移切换），可设置为'slide'（普通切换、默认）,"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）。部分选项需要配合其他参数，详情请看API文档
	    
    })   

   /* //鼠标滑过pagination控制swiper切换
		for(i=0;i<mySwiper.pagination.bullets.length;i++){
		  mySwiper.pagination.bullets[i].οnmοuseοver=function(){
		    this.click();
		  };
		}   */   

	</script>
</body>
</html>