使用swiper做的轮播图--可以中间大两边小

最新推荐文章于 2024-06-03 15:23:16 发布
最新推荐文章于 2024-06-03 15:23:16 发布
阅读量6.1k 收藏 23
点赞数
分类专栏： 个人学习日志 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XKFC1/article/details/108289609
版权

1.index.HTML
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="css/swiper.min.css">

  <!-- Demo styles -->
  <style>
  
    html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	  transition: 300ms;
	  transform: scale(0.8);
    }
	.swiper-slide-active,.swiper-slide-duplicate-active{
      transform: scale(1);
	}
  </style>
</head>
<body>
<div style="width: 500px;height: 400px;">
    <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 class="swiper-slide">Slide 5</div>
            <div class="swiper-slide">Slide 6</div>
            <div class="swiper-slide">Slide 7</div>
            <div class="swiper-slide">Slide 8</div>
            <div class="swiper-slide">Slide 9</div>
            <div class="swiper-slide">Slide 10</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
</div>

  <script src="js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
            
            slidesPerView:5,
            sapceBetween:40,
            centeredSlides:true,
            loop:true,
            autoplay:true,
            pagination:{
                el:'.swiper-pagination'
            }
 
        });
  </script>
</body>
</html>

主要用了swiper.js，没写注释。这些都很简单，不懂的上swiper官网找
网址：https://www.swiper.com.cn/usage/
里面可以找到swiper.min.css swiper.min.js下载

**index2.html
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="css/swiper.min.css">
<style>
    #certify{
    position: relative;
    width: 1200px;
    height: 600px;
    margin: 0 auto;
    }
    #certify .swiper-slide {
    width: 520px;
    height: 408px;
    background: #fff;
    box-shadow: 0 8px 30px #ddd;
}
    html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	  transition: 300ms;
	  transform: scale(0.8);
    }

  </style>
<body>
    <div id="certify">
        <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 class="swiper-slide">Slide 5</div>
                <div class="swiper-slide">Slide 6</div>
                <div class="swiper-slide">Slide 7</div>
                <div class="swiper-slide">Slide 8</div>
                <div class="swiper-slide">Slide 9</div>
                <div class="swiper-slide">Slide 10</div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
</body>
</html>  
<script src="js/swiper.min.js"></script>
<script>

certifySwiper = new Swiper('#certify .swiper-container', {
	watchSlidesProgress: true,
	slidesPerView: 'auto',
	centeredSlides: true,
	loop: true,
	loopedSlides: 10 ,
	autoplay: true,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
	pagination: {
		el: '.swiper-pagination',
		//clickable :true,
	},
	on: {
		progress: function(progress) {
			for (i = 0; i < this.slides.length; i++) {
				var slide = this.slides.eq(i);
				var slideProgress = this.slides[i].progress;
				modify = 1;
				if (Math.abs(slideProgress) > 1) {
					modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
				}
				translate = slideProgress * modify * 260 + 'px';
				scale = 1 - Math.abs(slideProgress) / 5;
				zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
				slide.transform('translateX(' + translate + ') scale(' + scale + ')');
				slide.css('zIndex', zIndex);
				slide.css('opacity', 1);
				if (Math.abs(slideProgress) > 3) {
					slide.css('opacity', 0);
				}
			}
		},
		setTransition: function(transition) {
			for (var i = 0; i < this.slides.length; i++) {
				var slide = this.slides.eq(i)
				slide.transition(transition);
			}

		}
	}

})
</script>

这也是swiper做的，这种应该是最常用的了。
**index3.html
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="css/swiper.min.css">
<style>
    #certify{
    position: relative;
    width: 1200px;
    height: 600px;
    margin: 0 auto;
    }
    #certify .swiper-slide {
    width: 520px;
    height: 408px;
    background: #fff;
    box-shadow: 0 8px 30px #ddd;
}
    html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	  transition: 300ms;
	  transform: scale(0.8);
    }

  </style>
<body>
    <div id="certify">
        <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 class="swiper-slide">Slide 5</div>
                <div class="swiper-slide">Slide 6</div>
                <div class="swiper-slide">Slide 7</div>
                <div class="swiper-slide">Slide 8</div>
                <div class="swiper-slide">Slide 9</div>
                <div class="swiper-slide">Slide 10</div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
</body>
</html>  
<script src="js/swiper.min.js"></script>
<script>

certifySwiper = new Swiper('#certify .swiper-container', {
	watchSlidesProgress: true,
	slidesPerView: 'auto',
	centeredSlides: true,
	loop: true,
	loopedSlides: 10 ,
	autoplay: true,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
	pagination: {
		el: '.swiper-pagination',
		clickable :true,
	},
	on: {
		progress: function(progress) {
			for (i = 0; i < this.slides.length; i++) {
				var slide = this.slides.eq(i);
				var slideProgress = this.slides[i].progress;
				modify = 1;
				if (Math.abs(slideProgress) > 1) {
					modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
				}
				translate = slideProgress * modify * 280 + 'px';
				scale = 1 - Math.abs(slideProgress) / 5;
				zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
        if(parseInt(slideProgress)==0){
          scale=1;
        }
        else{
          scale=0.8;
        }
        if(parseInt(slideProgress)==1){
          translate=290+'px';
        }
        else  if(parseInt(slideProgress)==2){
          translate=385+'px';
        }
        else  if(parseInt(slideProgress)==-1){
          translate=-290+'px';
        }
        else  if(parseInt(slideProgress)==-2){
          translate=-385+'px';
        }
				slide.transform('translateX(' + translate + ') scale(' + scale + ')');
				slide.css('zIndex', zIndex);
				slide.css('opacity', 1);
				if (Math.abs(slideProgress) > 3) {
					slide.css('opacity', 0);
				}
			}
		},
		setTransition: function(transition) {
			for (var i = 0; i < this.slides.length; i++) {
				var slide = this.slides.eq(i)
				slide.transition(transition);
			}

		}
	}

})
</script>

这是我自已要用的，translateX大小有点问题，反正能用我就再没调了。还有translateX这个是css里面的transform属性的一种，在不同浏览器有点小问题，出问题去官网看看吧。

代码就是bug
关注
  • 0
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
中间图片放大，两边缩小，轮播效果
10-10
中间图片放大，两边缩小，轮播效果，自己写的，没有其它的JS
vue使用swiper实现中间大两边小的轮播图效果
10-15
主要介绍了vue使用swiper实现中间大两边小的轮播图效果，本文分步骤通过实例代码讲解的非常详细,需要的朋友可以参考下
swiper 轮播 多图片两边小中间大
最新发布
weixin_42456392的博客
06-03 290
【代码】swiper 轮播 多图片两边小中间大。
轮播图效果-中间大两边小
04-20
轮播图效果-中间大两边小
轮播图中间图片大，两边图片小
江枫映渔火丶
06-01 3070
轮播图中间大图，两边小图，平滑轮播效果 中间图片大，两边图片小的效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>旋转木马轮播</title> <link rel="stylesheet
html实现轮播图--小圆圈呈中间大两边小的样式
m0_56836274的博客
08-25 1666
参照奔驰官网实现的轮播图。轮播图下方小圆圈实现了中间大两边小的效果。还能有以下功能：点击左右键能切换图片；点击小圆圈能切换图片，实现自动轮播；当鼠标放上去停止自动播放；大概鼠标离开后能自动播放。
轮播图效果-swiper插件中间大两边小
zjx164的博客
07-13 1114
轮播图效果-中间大两边小，swiper插件
uniapp-swiper轮播图中间放大两边缩小
weixin_52852561的博客
07-19 3359
有个新需求,做一个轮播图,但是需要轮播到中间的时候,中间放大.是采用uniapp开发的小程序下面贴代码和效果图哈。
轮播图-实现中间大两边小的轮播图
wangdanYL的博客
07-08 1835
<Swiper spaceBetween={-60}//幻灯片之间的距离 slidesPerView={3} //视图幻灯片数量 centeredSlides={true} //活动幻灯片将居中 loop={true} // 是否循环 className={'mySwiper2'} > {imgDataFour.map((e, i) => { return ( <SwiperSlide key={i}> <im.
vue开发移动端-swiper轮播图（两边小中间大）
qq_41154522的博客
08-31 478
vue开发移动端-swiper轮播图（两边小中间大）
adc.zip_两边小_中间大_旋转木马_轮播图
09-21
在"adc.zip_两边小_中间大_旋转木马_轮播图"这个文件中，我们可以推测这可能是一个包含实现这种效果的代码、设计资源或者相关教程的压缩包。 "两边小 中间大"的描述可能是指轮播图的布局特点，即在轮播图的两侧有较...
node 报错 throw er; // Unhandled 'error' event或消除占用端口
XKFC1的博客
02-02 1799
表示端口 3000被占用 解除占用的方法 第一步，.进入cmd命令窗口，写netstat -ano|findstr “3000” 之后显示 第二步 根据上一步的结果 写 taskkill -PID 992 -F 之后展示 表示端口占用被解除 ...
h5 使用html2canvas实现截图
XKFC1的博客
08-31 1475
第一步先看效果 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l
在windows安装apache 并实现IP地址访问
XKFC1的博客
12-31 1262
1.下载apache （1）打开apache官网http://httpd.apache.org/ （2）点击Download，出现以下界面 。 （3）选择Windows版本 （4）在新的界面中，会发现VC9和VC11字样，通过阅读相关内容得知，VC9是指用VS2008编译的代码，而VC11是用VS2012编译的，而用VS2012编译的无法在Windows XP和Server 2003中使用。算是为了兼容性好点吧，本人选的用VC9编译Apache，选择下载至此，下载过程完成！ 2.安装apache
Android studio 3.0版本之后启动 Android Device Monitor,及报错解决
XKFC1的博客
04-09 983
3.0版本之后和之前版本不同，无法直接打开 如果你只是向查看文件系统，可以点击右下角Device file explorer查看 如： 2 .启动Android Device Monitor （1）找到你的sdk位置 如果没有改动默认在C盘\用户\管理员\AppData\Local\Android\Sdk （2）在sdk文件夹按这个路径打开Sdk\tools\lib\monitor-x86_64 直接点击monitor.exe运行 （3）点击后可能报错，让去configuration文件下看日志文件，日.
基于Windows2012平台安装配置实现安全Apache Web服务器
XKFC1的博客
04-25 927
信息科学与技术学院 2020—2021学年第一学期 题目名称：《基于Windows2012平台安装配置实现安全Apache Web服务器》 专 业： 软件工程 班 级： 学 号： 学生姓名： 指导教师： 完成日期：二○二○ 年 十二 月 十三 日 目 录 1.1 实训课题/实践任务名称：基于Windows2012平台安装配置实现安全Apache Web服务器 - 3 - 1.2 理论背景/基础知识/相关技术概述 - 3 - 1.3 实践任务环境/资源说明
C# 窗口传参数
XKFC1的博客
04-13 568
将第一个窗口值传给第二个窗口 方法1 重载构造函数 在第一个窗口获取，datagridview某个数据，展示第二个窗口并重载函数，传参 private void button3_Click(object sender, EventArgs e) { //方法1 重载构造函数 change frmchange = new change(...
swiper实现中间大两边小的错位轮播图
04-24
好的，我知道你在问什么。实现中间大两边小的错位轮播图可以使用 Swiper 插件中的 effect 参数，将其设置为 "coverflow"，同时通过设置其他参数如 slidesPerView、centeredSlides、coverflowEffect 等来实现。具体代码如下： ``` var swiper = new Swiper('.swiper-container', { slidesPerView: 3, centeredSlides: true, loop: true, coverflowEffect: { rotate: 50, stretch: 0, depth: 100, modifier: 1, slideShadows: true }, pagination: { el: '.swiper-pagination', }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', } }); ``` 其中，slidesPerView 参数表示每次轮播显示的图片数量，centeredSlides 参数表示居中显示轮播图，coverflowEffect 参数表示使用 coverflow 效果，rotate、stretch、depth、modifier、slideShadows 等参数可以根据需要调整效果。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值