移动端前端项目--7_微商城slide图片制作

字数 120阅读 81

7_微商城slide图片制作

一、学习目标:

1、能够制作slide图片
2、学会使用swiper插件:http://www.swiper.com.cn/api/index.html

二、制作步骤详解:

复制html模板:见http://www.swiper.com.cn/usage/swiper4/index.html
↓引入swiper插件:
① css文件(勿忘)

<link rel="stylesheet" href="path/to/swiper.min.css">

② js文件--通过requirejs,见mainconfig.js↓:

<script src="script/libs/require.js"  data-main="script/views/enterjs/mainconfig"></script>

↓创建入口文件:static>script>views>enterjs>mainconfig.js
↓配置mainconfig.js:

require.config({
    paths:{
        jquery:"../../libs/jquery",  //swiper基于jquery
        swiper:"../../plugs/swiper.min"
    }
})
require(['jquery','swiper'],function(){
    var topSlider=new Swiper('#topSlider', {
        slidesPerView: 1,
        //centeredSlides: true,
        autoplay: 3000,
        loop: true,
        autoplayDisableOnInteraction: true
    });


})
slider-效果图.gif

推荐阅读更多精彩内容