Swiper.js 开启华丽移动前端创作之旅

JavaScript/前端
383
0
0
2022-08-30
标签   JavaScript库

今天给大家推荐的这款利器叫Swiper.js!它是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端,其能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。而且Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!那接下来我们看下它精彩的案例!

Swiper.js 开启华丽移动前端创作之旅

普通的轮播

Swiper.js 开启华丽移动前端创作之旅

Slides居中 + 自动分组

Swiper.js 开启华丽移动前端创作之旅

渐变效果

Swiper.js 开启华丽移动前端创作之旅

3D 方块效果

Swiper.js 开启华丽移动前端创作之旅

3D 覆盖流效果

Swiper.js 开启华丽移动前端创作之旅

3D 翻转效果

那这么优美的东西使用起来怎么样呢?那接下来就带大家一起揭开这神秘的面纱!

  • 第一步:加载插件
  • 那我们需要的插件有两个文件,一个是swiper.min.css,另外一个自然是swiper.min.js
  • 第二步:HTML内容
  • Swiper.js 开启华丽移动前端创作之旅
  • 第三步:初始化Swiper:最好是挨着</body>标签
  • Swiper.js 开启华丽移动前端创作之旅好了,经过我们简单的设置,已经大功告成了,你还在等什么?