|
本帖最后由 zeroone 于 2023-4-19 10:48 编辑
自己写错了,请无视
- <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>
- </div><div> </div></div>
复制代码
js代码:
- <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>
复制代码
点击后左右切换无效
|
|