├── .gitignore
├── demo.gif
├── .babelrc
├── src
    ├── main.js
    ├── vue-better-slider
    │   ├── index.js
    │   ├── components
    │   │   ├── slider-item.vue
    │   │   └── slider.vue
    │   └── common
    │   │   └── js
    │   │       └── dom.js
    └── App.vue
├── .postcssrc.js
├── static
    └── package.json
├── vue-better-slider
    ├── package.json
    └── index.js
├── index.html
├── LICENSE
├── package.json
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | npm-debug.log*
4 | /vue-better-slider


--------------------------------------------------------------------------------
/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openfe-openfe/vue-better-slider/HEAD/demo.gif


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"presets": [["env",{
3 | 		"modules": false
4 | 	}], "stage-0"]
5 | }


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App'
3 | 
4 | new Vue({
5 |     el: '#app',
6 |     render: h => h(App)
7 | });


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   "plugins": {
3 |     "autoprefixer": {
4 |     	browsers:["> 1%", "last 20 versions", "not ie <= 8"]
5 |     }
6 |   }
7 | }


--------------------------------------------------------------------------------
/src/vue-better-slider/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import IcSlider from './components/slider'
3 | import IcSliderItem from './components/slider-item'
4 | export {
5 | 	IcSlider,
6 | 	IcSliderItem
7 | }


--------------------------------------------------------------------------------
/static/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "vue-better-slider",
 3 |     "version": "1.1.1",
 4 |     "main": "index.js",
 5 |     "scripts": {},
 6 |     "author": "songhao",
 7 |     "license": "MIT",
 8 |     "devDependencies": {
 9 |         "babel-preset-env": "^1.3.3",
10 |         "babel-preset-stage-0": "^6.24.1",
11 |         "vue": "^2.2.6"
12 |     }
13 | }


--------------------------------------------------------------------------------
/vue-better-slider/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "vue-better-slider",
 3 |     "version": "1.1.0",
 4 |     "main": "index.js",
 5 |     "scripts": {},
 6 |     "author": "songhao",
 7 |     "license": "MIT",
 8 |     "devDependencies": {
 9 |         "babel-preset-env": "^1.3.3",
10 |         "babel-preset-stage-0": "^6.24.1",
11 |         "vue": "^2.2.6"
12 |     }
13 | }


--------------------------------------------------------------------------------
/src/vue-better-slider/components/slider-item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="ic-slider-item" :style="style">
 3 |     <slot></slot>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'ic-slider-item',
10 |   data() {
11 |     return {
12 |       offset: 0
13 |     };
14 |   },
15 |   computed: {
16 |     style() {
17 |       return {
18 |         width: this.$parent.width + 'px',
19 |         transform: `translate3d(${this.offset}px, 0, 0)`
20 |       };
21 |     }
22 |   },
23 |   beforeCreate() {
24 |     this.$parent.swipes.push(this);
25 |   },
26 |   destroyed() {
27 |     this.$parent.swipes.splice(this.$parent.swipes.indexOf(this), 1);
28 |   }
29 | };
30 | </script>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>
 6 |     <meta name="apple-mobile-web-app-capable" content="yes"/>
 7 |     <meta name="x5-orientation" content="portrait" />
 8 |     <meta name="screen-orientation" content="portrait" />
 9 |     <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
10 |     <meta name="format-detection" content="telephone=no"/>
11 |     <meta http-equiv="Cache-Control" content="no-cache"/>
12 |     <meta http-equiv="Pragma" content="no-cache"/>
13 |     <meta http-equiv="Expires" content="0">
14 | </head>
15 | <body>
16 |     <div id="app"></div>
17 | </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2017 songhao
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/src/vue-better-slider/common/js/dom.js:
--------------------------------------------------------------------------------
 1 | export function hasClass(el, className) {
 2 |     let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
 3 |     return reg.test(el.className)
 4 |   }
 5 |   
 6 |   export function addClass(el, className) {
 7 |     if (hasClass(el, className)) {
 8 |       return
 9 |     }
10 |   
11 |     let newClass = el.className.split(' ')
12 |     newClass.push(className)
13 |     el.className = newClass.join(' ')
14 |   }
15 |   
16 |   export function getData(el, name, val) {
17 |     const prefix = 'data-'
18 |     if (val) {
19 |       return el.setAttribute(prefix + name, val)
20 |     }
21 |     return el.getAttribute(prefix + name)
22 |   }
23 |   
24 |   let elementStyle = document.createElement('div').style
25 |   
26 |   let vendor = (() => {
27 |     let transformNames = {
28 |       webkit: 'webkitTransform',
29 |       Moz: 'MozTransform',
30 |       O: 'OTransform',
31 |       ms: 'msTransform',
32 |       standard: 'transform'
33 |     }
34 |   
35 |     for (let key in transformNames) {
36 |       if (elementStyle[transformNames[key]] !== undefined) {
37 |         return key
38 |       }
39 |     }
40 |   
41 |     return false
42 |   })()
43 |   
44 |   export function prefixStyle(style) {
45 |     if (vendor === false) {
46 |       return false
47 |     }
48 |   
49 |     if (vendor === 'standard') {
50 |       return style
51 |     }
52 |   
53 |     return vendor + style.charAt(0).toUpperCase() + style.substr(1)
54 |   }
55 |   


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-better-slider",
 3 |   "version": "1.0.3",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "dev": "node build/server.js",
 8 |     "compile": "node build/compile.js && npm publish ./vue-better-slider"
 9 |   },
10 |   "author": "songhao",
11 |   "license": "MIT",
12 |   "dependencies": {
13 |     "babel-core": "^6.24.0",
14 |     "babel-loader": "^6.4.1",
15 |     "babel-plugin-transform-runtime": "^6.23.0",
16 |     "babel-preset-env": "^1.3.3",
17 |     "babel-preset-es2015": "^6.24.0",
18 |     "babel-preset-stage-0": "^6.22.0",
19 |     "better-scroll": "^1.3.0",
20 |     "clean-webpack-plugin": "^0.1.16",
21 |     "connect-history-api-fallback": "^1.3.0",
22 |     "css-loader": "^0.27.3",
23 |     "eventsource-polyfill": "^0.9.6",
24 |     "express": "^4.15.2",
25 |     "extract-text-webpack-plugin": "^2.1.0",
26 |     "file-loader": "^0.10.1",
27 |     "friendly-errors-webpack-plugin": "^1.6.1",
28 |     "html-webpack-plugin": "^2.28.0",
29 |     "lodash": "^4.17.4",
30 |     "opn": "^4.0.2",
31 |     "postcss-loader": "^1.3.3",
32 |     "rimraf": "^2.6.1",
33 |     "semver": "^5.3.0",
34 |     "shelljs": "^0.7.7",
35 |     "style-loader": "^0.16.1",
36 |     "stylus": "^0.54.5",
37 |     "stylus-loader": "^2.1.1",
38 |     "uglify-js": "^2.8.0",
39 |     "uglifyjs-webpack-plugin": "^0.3.1",
40 |     "url-loader": "^0.5.8",
41 |     "vue": "^2.2.6",
42 |     "vue-loader": "^11.3.3",
43 |     "vue-router": "^2.3.0",
44 |     "vue-template-compiler": "^2.2.6",
45 |     "webpack": "^2.3.2",
46 |     "webpack-dev-middleware": "^1.10.1",
47 |     "webpack-hot-middleware": "^2.17.1"
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |         <div>
 3 |             <ic-slider :autoplay="3000">
 4 |               <ic-slider-item v-for="items in images" :key="items.id">
 5 |                 <img :src="items.picUrl"/>
 6 |               </ic-slider-item>
 7 |             </ic-slider>
 8 |         </div>
 9 | </template>
10 | 
11 | <script>
12 |   import IcSlider from './vue-better-slider/components/slider'
13 |   import IcSliderItem from './vue-better-slider/components/slider-item'
14 |   export default {
15 |     data() {
16 |       return {
17 |         images: [
18 |           {
19 |             linkUrl: 'http://y.qq.com/w/album.html?albummid=0044K2vN1sT5mE',
20 |             picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000001YCZlY3aBifi.jpg',
21 |             id: 11351
22 |           },
23 |           {
24 |             linkUrl: 'https://y.qq.com/m/digitalbum/gold/index.html?_video=true&id=2197820&g_f=shoujijiaodian',
25 |             picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000004ckGfg3zaho0.jpg',
26 |             id: 11372
27 |           },
28 |           {
29 |             linkUrl: 'http://y.qq.com/w/album.html?albummid=001tftZs2RX1Qz',
30 |             picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M00000236sfA406cmk.jpg',
31 |             id: 11378
32 |           },
33 |           {
34 |             linkUrl: 'https://y.qq.com/msa/218/0_4085.html',
35 |             picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000001s0BXx3Zxcwb.jpg',
36 |             id: 11375
37 |           },
38 |           {
39 |             linkUrl: 'https://y.qq.com/m/digitalbum/gold/index.html?_video=true&id=2195876&g_f=shoujijiaodian',
40 |             picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000002cwng4353HKz.jpg',
41 |             id: 11287
42 |           }
43 |         ]
44 |       }
45 |     },
46 |     components: {
47 |       IcSlider,
48 |       IcSliderItem
49 |     }
50 |   }
51 | </script>
52 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-better-slider
 2 | 
 3 | ## 这是什么(What is it)
 4 | 为vue提供的一个轮播图组件
 5 | 
 6 | ## 代码演示如何使用
 7 | 
 8 | npm install vue-better-slider --save 
 9 | 
10 | ### 1.main.js引入样式文件
11 | ```js
12 | import 'vue-better-slider/style.css'
13 | 
14 | ```
15 | ### 2.导入并注册组件,注册组件
16 | ```js
17 | import {IcSlider,IcSliderItem} from 'vue-better-slider'
18 | components: {
19 |    IcSlider,
20 |    IcSliderItem
21 | }
22 | ```
23 | ### 3.template模板
24 | ```html
25 |    <ic-slider :autoplay="3000">
26 |       <ic-slider-item v-for="(items,index) in images">
27 |         <img :src="items.picUrl"/>
28 |       </ic-slider-item>
29 |     </ic-slider>
30 | ```
31 | 
32 | ```js
33 |   export default {
34 |     data() {
35 |       return {
36 |         images: [
37 |           {
38 |             linkUrl: 'http://y.qq.com/w/album.html?albummid=0044K2vN1sT5mE',
39 |             picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000001YCZlY3aBifi.jpg',
40 |             id: 11351
41 |           },
42 |           {
43 |             linkUrl: 'https://y.qq.com/m/digitalbum/gold/index.html?_video=true&id=2197820&g_f=shoujijiaodian',
44 |             picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000004ckGfg3zaho0.jpg',
45 |             id: 11372
46 |           },
47 |           {
48 |             linkUrl: 'http://y.qq.com/w/album.html?albummid=001tftZs2RX1Qz',
49 |             picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M00000236sfA406cmk.jpg',
50 |             id: 11378
51 |           },
52 |           {
53 |             linkUrl: 'https://y.qq.com/msa/218/0_4085.html',
54 |             picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000001s0BXx3Zxcwb.jpg',
55 |             id: 11375
56 |           },
57 |           {
58 |             linkUrl: 'https://y.qq.com/m/digitalbum/gold/index.html?_video=true&id=2195876&g_f=shoujijiaodian',
59 |             picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000002cwng4353HKz.jpg',
60 |             id: 11287
61 |           }
62 |         ]
63 |       }
64 |     }
65 |   }
66 | ```
67 | ## 组件演示demo
68 | 
69 | ```js
70 | git clone https://github.com/songhaoreact/vue-better-slider.git
71 | cd vue-better-slier
72 | npm install 
73 | npm run dev
74 | ```
75 | 
76 | ## 效果图
77 | 
78 | ![image](http://oij04cgoe.bkt.clouddn.com/demo.gif)
79 | 
80 | ## 说明
81 | 
82 | 实现功能有：轮播 自动播放 dots 循环播放，适合手机端,图片高度自适应
83 | 
84 | 
85 | 
86 | 
87 | 
88 | 
89 | 
90 | 
91 | 
92 | 
93 | 
94 | 


--------------------------------------------------------------------------------
/vue-better-slider/index.js:
--------------------------------------------------------------------------------
1 | module.exports=function(t){function i(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,i),o.l=!0,o.exports}var e={};return i.m=t,i.c=e,i.i=function(t){return t},i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:n})},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,i){return Object.prototype.hasOwnProperty.call(t,i)},i.p="/",i(i.s=6)}([function(t,i){t.exports=function(t,i,e,n){var o,s=t=t||{},r=typeof t.default;"object"!==r&&"function"!==r||(o=t,s=t.default);var c="function"==typeof s?s.options:s;if(i&&(c.render=i.render,c.staticRenderFns=i.staticRenderFns),e&&(c._scopeId=e),n){var u=Object.create(c.computed||null);Object.keys(n).forEach(function(t){var i=n[t];u[t]=function(){return i}}),c.computed=u}return{esModule:o,exports:s,options:c}}},function(t,i,e){var n=e(0)(e(4),e(8),null,null);t.exports=n.exports},function(t,i,e){e(7);var n=e(0)(e(5),e(9),null,null);t.exports=n.exports},function(t,i){t.exports=require("vue")},function(t,i,e){"use strict";Object.defineProperty(i,"__esModule",{value:!0}),i.default={name:"ic-slider-item",data:function(){return{offset:0}},computed:{style:function(){return{width:this.$parent.width+"px",transform:"translate3d("+this.offset+"px, 0, 0)"}}},beforeCreate:function(){this.$parent.swipes.push(this)},destroyed:function(){this.$parent.swipes.splice(this.$parent.swipes.indexOf(this),1)}}},function(t,i,e){"use strict";Object.defineProperty(i,"__esModule",{value:!0}),i.default={name:"ic-slider",props:{autoplay:Number,showIndicators:{type:Boolean,default:!0},duration:{type:Number,default:500}},data:function(){return{width:0,offset:0,startX:0,startY:0,active:0,deltaX:0,swipes:[],direction:"",currentDuration:0}},mounted:function(){var t=this;this.initialize(),window.addEventListener("resize",function(){t.initialize()})},destroyed:function(){clearTimeout(this.timer)},watch:{swipes:function(){this.initialize()}},computed:{count:function(){return this.swipes.length},trackStyle:function(){return{paddingLeft:this.width+"px",width:(this.count+2)*this.width+"px",transitionDuration:this.currentDuration+"ms",transform:"translate3d("+this.offset+"px, 0, 0)"}},activeIndicator:function(){return(this.active+this.count)%this.count}},methods:{initialize:function(){clearTimeout(this.timer),this.width=this.$el.getBoundingClientRect().width,this.active=0,this.currentDuration=0,this.offset=this.count>1?-this.width:0,this.swipes.forEach(function(t){t.offset=0}),this.autoPlay()},onTouchStart:function(t){clearTimeout(this.timer),this.deltaX=0,this.direction="",this.currentDuration=0,this.startX=t.touches[0].clientX,this.startY=t.touches[0].clientY,this.active<=-1&&this.move(this.count),this.active>=this.count&&this.move(-this.count)},onTouchMove:function(t){this.direction=this.direction||this.getDirection(t.touches[0]),"horizontal"===this.direction&&(t.preventDefault(),this.deltaX=t.touches[0].clientX-this.startX,this.move(0,this.range(this.deltaX,[-this.width,this.width])))},onTouchEnd:function(){this.deltaX&&(this.move(Math.abs(this.deltaX)>50?this.deltaX>0?-1:1:0),this.currentDuration=this.duration),this.autoPlay()},move:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,e=this.active,n=this.count,o=this.swipes,s=this.deltaX,r=this.width;t?(-1===e&&(o[n-1].offset=0),o[0].offset=e===n-1&&t>0?n*r:0,this.active+=t):0===e?o[n-1].offset=s>0?-n*r:0:e===n-1&&(o[0].offset=s<0?n*r:0),this.offset=i-(this.active+1)*this.width},autoPlay:function(){var t=this,i=this.autoplay;i&&this.count>1&&(clearTimeout(this.timer),this.timer=setTimeout(function(){t.currentDuration=0,t.active>=t.count&&t.move(-t.count),setTimeout(function(){t.currentDuration=t.duration,t.move(1),t.autoPlay()},30)},i))},getDirection:function(t){var i=Math.abs(t.clientX-this.startX),e=Math.abs(t.clientY-this.startY);return i>e?"horizontal":i<e?"vertical":""},range:function(t,i){return Math.min(Math.max(t,i[0]),i[1])}}}},function(t,i,e){"use strict";Object.defineProperty(i,"__esModule",{value:!0});var n=e(3),o=(e.n(n),e(2)),s=e.n(o),r=e(1),c=e.n(r);e.d(i,"IcSlider",function(){return s.a}),e.d(i,"IcSliderItem",function(){return c.a})},function(t,i){},function(t,i){t.exports={render:function(){var t=this,i=t.$createElement;return(t._self._c||i)("div",{staticClass:"ic-slider-item",style:t.style},[t._t("default")],2)},staticRenderFns:[]}},function(t,i){t.exports={render:function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("div",{staticClass:"ic-slider"},[t.count>1?e("div",{staticClass:"ic-slider__track",style:t.trackStyle,on:{touchstart:t.onTouchStart,touchmove:t.onTouchMove,touchend:t.onTouchEnd,touchcancel:t.onTouchEnd,transitionend:function(i){return t.$emit("change",t.activeIndicator)}}},[t._t("default")],2):e("div",{staticClass:"ic-slider__track"},[t._t("default")],2),t._v(" "),t.showIndicators&&t.count>1?e("div",{staticClass:"ic-slider__indicators"},t._l(t.count,function(i){return e("i",{class:{"ic-slider__indicator--active":i-1===t.activeIndicator}})}),0):t._e()])},staticRenderFns:[]}}]);


--------------------------------------------------------------------------------
/src/vue-better-slider/components/slider.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="ic-slider">
  3 |     <div 
  4 |       v-if="count > 1"
  5 |       :style="trackStyle"
  6 |       class="ic-slider__track"
  7 |       @touchstart="onTouchStart"
  8 |       @touchmove="onTouchMove"
  9 |       @touchend="onTouchEnd"
 10 |       @touchcancel="onTouchEnd"
 11 |       @transitionend="$emit('change', activeIndicator)"
 12 |     >
 13 |       <slot></slot>
 14 |     </div>
 15 |     <div 
 16 |       v-else
 17 |       class="ic-slider__track"
 18 |     >
 19 |       <slot></slot>
 20 |     </div>
 21 |     <div class="ic-slider__indicators" v-if="showIndicators && count > 1">
 22 |       <i v-for="index in count" :class="{ 'ic-slider__indicator--active': index - 1 === activeIndicator }" />
 23 |     </div>
 24 | </div>
 25 | </template>
 26 | 
 27 | <script>
 28 | export default {
 29 |   name: 'ic-slider',
 30 |   props: {
 31 |     autoplay: Number,
 32 |     showIndicators: {
 33 |       type: Boolean,
 34 |       default: true
 35 |     },
 36 |     duration: {
 37 |       type: Number,
 38 |       default: 500
 39 |     }
 40 |   },
 41 |   data() {
 42 |     return {
 43 |       width: 0,
 44 |       offset: 0,
 45 |       startX: 0,
 46 |       startY: 0,
 47 |       active: 0,
 48 |       deltaX: 0,
 49 |       swipes: [],
 50 |       direction: '',
 51 |       currentDuration: 0
 52 |     };
 53 |   },
 54 |   mounted() {
 55 |     this.initialize();
 56 |     // 监听 resize事件,改变窗口重新初始化
 57 |     window.addEventListener('resize', () => {
 58 |         this.initialize();
 59 |     })
 60 |   },
 61 |   destroyed() {
 62 |     clearTimeout(this.timer);
 63 |   },
 64 |   watch: {
 65 |     swipes() {
 66 |       this.initialize();
 67 |     }
 68 |   },
 69 |   computed: {
 70 |     count() {
 71 |       return this.swipes.length;
 72 |     },
 73 |     trackStyle() {
 74 |       return {
 75 |         paddingLeft: this.width + 'px',
 76 |         width: (this.count + 2) * this.width + 'px',
 77 |         transitionDuration: `${this.currentDuration}ms`,
 78 |         transform: `translate3d(${this.offset}px, 0, 0)`
 79 |       };
 80 |     },
 81 |     activeIndicator() {
 82 |       return (this.active + this.count) % this.count;
 83 |     }
 84 |   },
 85 |   methods: {
 86 |     initialize() {
 87 |       clearTimeout(this.timer);
 88 |       this.width = this.$el.getBoundingClientRect().width;
 89 |       this.active = 0;
 90 |       this.currentDuration = 0;
 91 |       this.offset = this.count > 1 ? -this.width : 0;
 92 |       this.swipes.forEach(swipe => {
 93 |         swipe.offset = 0;
 94 |       });
 95 |       this.autoPlay();
 96 |     },
 97 |     onTouchStart(event) {
 98 |       clearTimeout(this.timer);
 99 |       this.deltaX = 0;
100 |       this.direction = '';
101 |       this.currentDuration = 0;
102 |       this.startX = event.touches[0].clientX;
103 |       this.startY = event.touches[0].clientY;
104 |       if (this.active <= -1) {
105 |         this.move(this.count);
106 |       }
107 |       if (this.active >= this.count) {
108 |         this.move(-this.count);
109 |       }
110 |     },
111 |     onTouchMove(event) {
112 |       this.direction = this.direction || this.getDirection(event.touches[0]);
113 |       if (this.direction === 'horizontal') {
114 |         event.preventDefault();
115 |         this.deltaX = event.touches[0].clientX - this.startX;
116 |         this.move(0, this.range(this.deltaX, [-this.width, this.width]));
117 |       }
118 |     },
119 |     onTouchEnd() {
120 |       if (this.deltaX) {
121 |         this.move(Math.abs(this.deltaX) > 50 ? (this.deltaX > 0 ? -1 : 1) : 0);
122 |         this.currentDuration = this.duration;
123 |       }
124 |       this.autoPlay();
125 |     },
126 |     move(move = 0, offset = 0) {
127 |       const { active, count, swipes, deltaX, width } = this;
128 |       if (move) {
129 |         if (active === -1) {
130 |           swipes[count - 1].offset = 0;
131 |         }
132 |         swipes[0].offset = active === count - 1 && move > 0 ? count * width : 0;
133 |         this.active += move;
134 |       } else {
135 |         if (active === 0) {
136 |           swipes[count - 1].offset = deltaX > 0 ? -count * width : 0;
137 |         } else if (active === count - 1) {
138 |           swipes[0].offset = deltaX < 0 ? count * width : 0;
139 |         }
140 |       }
141 |       this.offset = offset - (this.active + 1) * this.width;
142 |     },
143 |     autoPlay() {
144 |       const { autoplay } = this;
145 |       if (autoplay && this.count > 1) {
146 |         clearTimeout(this.timer);
147 |         this.timer = setTimeout(() => {
148 |           this.currentDuration = 0;
149 |           if (this.active >= this.count) {
150 |             this.move(-this.count);
151 |           }
152 |           setTimeout(() => {
153 |             this.currentDuration = this.duration;
154 |             this.move(1);
155 |             this.autoPlay();
156 |           }, 30);
157 |         }, autoplay);
158 |       }
159 |     },
160 |     getDirection(touch) {
161 |       const distanceX = Math.abs(touch.clientX - this.startX);
162 |       const distanceY = Math.abs(touch.clientY - this.startY);
163 |       return distanceX > distanceY ? 'horizontal' : distanceX < distanceY ? 'vertical' : '';
164 |     },
165 |     range(num, arr) {
166 |       return Math.min(Math.max(num, arr[0]), arr[1]);
167 |     }
168 |   }
169 | };
170 | </script>
171 | 
172 | <style>
173 |   body{
174 |     margin:0px;
175 |     padding:0px;
176 |   }
177 |   .ic-slider {
178 |     overflow: hidden;
179 |     position: relative;
180 |     user-select: none;
181 |   }
182 | 
183 |   .ic-slider .ic-slider-item {
184 |     float: left;
185 |     height: 100%;
186 |   }
187 |   .ic-slider .ic-slider-item img{
188 |     width:100%;
189 |   }
190 |   .ic-slider .ic-slider__track {
191 |     height: 100%;
192 |     overflow: hidden;
193 |   }
194 |   .ic-slider__indicators {
195 |     position: absolute;
196 |     right: 0;
197 |     left: 0;
198 |     bottom: 12px;
199 |     transform: translateZ(1px);
200 |     text-align: center;
201 |     font-size: 0;
202 |   }
203 |   .ic-slider__indicators > i {
204 |     display: inline-block;
205 |     margin: 0 4px;
206 |     width: 8px;
207 |     height: 8px;
208 |     border-radius: 50%;
209 |     background: #ccc;
210 | }
211 |  
212 |   .ic-slider__indicators .ic-slider__indicator--active {
213 |     width: 20px;
214 |     border-radius: 5px;
215 |     background: #fff;
216 | }
217 | </style>


--------------------------------------------------------------------------------