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