引入第三方库Swiper来写轮播

标签: Swiper
27人阅读 评论(0) 收藏 举报
分类:

1. CRM

CRM.png

2. 步骤

    1. 进入 Swiper 官网 http://idangero.us/swiper/get-started/
    2. 安装 Swiper
        这里选择1b的方式:
        引入css 和 script
        link链接选择:<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.min.css">
        script链接选择:<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.min.js"></script>
        注意:4.x.x 是要自己改成对应的版本号的  (去它的github仓库找) 4.2.2
             图片尺寸 4:3    这里用 888 X 666
    3. 在页面引入 Swiper(CSS 和 JS)
    4. 抄袭 HTML(CRM 中的 Copy)
    5. 抄袭 CSS
    6. 抄袭 JS
    7. 运行(CRM 中的 Run)
    8. 修改 HTML(CRM 中的 Modify)
    9. 修改 CSS
    10. 修改 JS

3. 效果图

swiper-slide.gif
相关代码:引入第三方库Swiper来写轮播

查看评论

ElasticSearch实战速学领悟

-
  • 1970年01月01日 08:00

vue轮播图插件vue-awesome-swiper的引入及使用

最近写vue2.0项目中用到了轮播图的一个插件,也就是vue-awesome-swiper,个人感觉还是比较强大的,swiper官网中的API及配置均可使用(支持3.0),以下说下使用该插件的一些步骤...
  • TTTTT2017
  • TTTTT2017
  • 2017-10-23 13:06:48
  • 531

轮播图插件swiper

刚用swiper做轮播图的时候,我一直做不出来,后来发现原来我只引入了swiper的js,没有引入swiper的css. 这两个都是必须引入的,而jquery库无论有没有都能运行swiper. 基...
  • daydaymiddle
  • daydaymiddle
  • 2017-06-05 13:59:58
  • 321

Swiper 强悍的轮播图插件

  • 2016年02月20日 21:55
  • 707KB
  • 下载

swiper轮播插件的使用

swiper轮播插件的使用 引入js文件 &amp;lt;script src=&quot;./js/swiper-3.4.2.min.js&quot;&amp;gt;&amp;lt;/s...
  • qq_39702364
  • qq_39702364
  • 2018-03-21 22:03:54
  • 3

swiper 轮播图插件

swiper 一个不错的轮播插件官网:http://www.swiper.com.cn/ demo:1 . 引入swiper.css文件和swiper.js 文件 (或者依赖jQuery的swiper...
  • Merciwen
  • Merciwen
  • 2017-06-09 16:46:33
  • 258

swiper图片轮播插件

Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架,使用硬件加速过渡(如果该设备支持的话)。主要使用于移动端的网站、移动web apps,native apps和hybrid apps。...
  • xhwwc110
  • xhwwc110
  • 2015-11-05 16:28:59
  • 1875

vue轮播图插件vue-awesome-swiper的使用

最近写vue2.0项目中用到了轮播图的一个插件,也就是vue-awesome-swiper,个人感觉还是比较强大的,swiper官网中的API及配置均可使用(支持3.0),以下说下使用该插件的一些步骤...
  • dreamStart_Lin
  • dreamStart_Lin
  • 2017-04-18 00:17:29
  • 6954

引入第三方库Swiper来写轮播

1. CRM 2. 步骤 1. 进入 Swiper 官网 http://idangero.us/swiper/get-started/ 2. 安装 Swiper ...
  • grapelove01
  • grapelove01
  • 2018-04-14 22:16:33
  • 27

vue引入swiper插件

步骤一:安装vue, $ npm install vue 步骤二:创建vue项目 # 全局安装 vue-cli $ npm install...
  • susuzhe123
  • susuzhe123
  • 2017-04-07 17:12:44
  • 31432
    个人资料
    等级:
    访问量: 84
    积分: 80
    排名: 154万+
    文章存档