查看: 731|回复: 0
打印 上一主题 下一主题

navigation 无效 (无视此贴。自己写错了)

[复制链接]

该用户从未签到

2

主题

2

帖子

9

积分

新手上路

Rank: 1

积分
9
跳转到指定楼层
楼主
发表于 2023-4-19 10:25:40 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
本帖最后由 zeroone 于 2023-4-19 10:48 编辑

自己写错了,请无视
  1. <div>    <div id="certify"></div><div>        <div class="swiper-container"></div><div>            <div class="swiper-wrapper"></div><div>                <div class="swiper-slide"></div><div>                    <a class="my-gallery" data-autoplay="true" data-vbtype="video" href="image/1.mp4"></div><div>                        <img src="image/1.png" data-src="image/1.png"/></div><div>                        <p>非常难得又值钱的认证证书</p></div><div>                    </a></div><div>                </div></div><div>                <div class="swiper-slide"></div><div>                    <a class="my-gallery"  data-autoplay="true" data-vbtype="video" href="image/2.mp4"></div><div>                        <img src="image/2.png" data-src="image/2.png"/></div><div>                        <p>深圳市优秀互联网企业认定证书</p></div><div>                    </a></div><div>                </div></div><div>                <div class="swiper-slide"></div><div>                    <a class="my-gallery"  data-autoplay="true" data-vbtype="video"  href="image/3.mp4"></div><div>                        <img src="image/3.png" data-src="image/3.png"/></div><div>                        <p>质量管理体系认证荣誉证书</p></div><div>                    </a></div><div>                </div></div><div>                <div class="swiper-slide"></div><div>                    <a class="my-gallery"  data-autoplay="true" data-vbtype="video" href="image/4.mp4"></div><div>                        <img src="image/4.png" data-src="image/4.png"/></div><div>                        <p>计算机软件著作权登记证书</p></div><div>                    </a></div><div>                </div></div><div>                <div class="swiper-slide"></div><div>                    <a class="my-gallery"  data-autoplay="true" data-vbtype="video" href="image/5.webm"></div><div>                        <img src="image/5.png"  data-src="image/5.png"/></div><div>                        <p>增值电信业务经营许可证</p></div><div>                    </a></div><div>                </div></div><div>            </div></div><div>        </div></div><div>        <div class="swiper-button-prev"></div></div><div>        <div class="swiper-button-next"></div></div><div>
  2. </div><div>    </div></div>
复制代码



js代码:
  1. <div>           const my_swipper = new Swiper('#certify .swiper-container', {</div><div>                autoplay: true,  //是否自动播放 true 是  false 否</div><div>                slidesPerView: 2,   //一排展示几个</div><div>                effect: 'coverflow',        //轮播图的切换效果  coverflow 3D</div><div>                centeredSlides: true,       // 设定为true时,active slide会居中,而不是默认状态下的居左。</div><div>                loop: true,             // 是否循环播放</div><div>                navigation: {</div><div>                    nextEl: '.swiper-button-next',</div><div>                    prevEl: '.swiper-button-prev',</div><div>                },</div><div>                coverflowEffect: {   // cover flow是类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式。coverflow效果参数,可选值:</div><div>                    rotate: 0,      //slide做3d旋转时Y轴的旋转角度</div><div>                    stretch: 10,        //每个slide之间的拉伸值,越大slide靠得越紧。5.3.6 后可使用%百分比</div><div>                    depth: 200,     //slide的位置深度。值越大z轴距离越远,看起来越小。</div><div>                    modifier: 2,        //depth和rotate和stretch的倍率,相当于depth*modifier、rotate*modifier、stretch*modifier,值越大这三个参数的效果越明显</div><div>                    slideShadows: false //是否开启slide阴影</div><div>                }</div><div>            });</div><div></div>
复制代码



点击后左右切换无效

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 分享淘帖
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

GMT+8, 2024-11-22 04:20 , Processed in 0.053893 second(s), 28 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表