经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
关于swiper 4的coverflowEffect(3d)
来源:cnblogs  作者:小小马哥  时间:2019/8/5 10:08:47  对本文有异议

轮播效果:

 

 

HTML:

 

  1. <div class="swiper-container successful_swiper">
  2. <div class="swiper-wrapper">
  3. <div class="swiper-slide">
  4. <img src="./images/mallPlatform/Choice_img1.jpg" alt="">
  5. </div>
  6. <div class="swiper-slide">
  7. <img src="./images/mallPlatform/Choice_img2.jpg" alt="">
  8. </div>
  9. <div class="swiper-slide">
  10. <img src="./images/mallPlatform/Choice_img3.jpg" alt="">
  11. </div>
  12. </div>
  13. </div>
  14. <div class="pagination successful_pagination"></div>

JS:

 

  1. new Swiper('.successful_swiper', {
  2. autoplay: {
  3. disableOnInteraction: false, // 鼠标滑动后继续自动播放
  4. delay: 4000, //4秒切换一次
  5. },
  6. speed: 1000, //切换过渡速度
  7. effect: 'coverflow',
  8. loop: true,
  9. slidesPerView: "auto",
  10. centeredSlides: true, //设置slide居中
  11. // spaceBetween: 10,
  12. coverflowEffect: {
  13. rotate: 0, //slide做3d旋转时Y轴的旋转角度。默认50。
  14. stretch: -30, //每个slide之间的拉伸值(距离),越大slide靠得越紧。 默认0。
  15. depth: 100, //slide的位置深度。值越大z轴距离越远,看起来越小。 默认100。
  16. modifier: 1, //depth和rotate和stretch的倍率,相当于 depth*modifier、rotate*modifier、stretch*modifier,值越大这三个参数的效果越明显。默认1。
  17. slideShadows: false //开启slide阴影。默认 true。
  18. },
  19. pagination: {
  20. el: '.successful_pagination',
  21. clickable: true,
  22. },
  23. });

原文链接:http://www.cnblogs.com/maxiansheng/p/11289483.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号