├── .gitignore
├── App.vue
├── Example.js
├── LICENSE
├── README.md
├── Slider.css
├── Slider.js
├── dist
    ├── Slider.css
    ├── Slider.css.map
    ├── Slider.js
    └── Slider.js.map
├── example
    ├── README.md
    ├── example.js
    ├── index.vue
    ├── package-lock.json
    ├── package.json
    └── yarn.lock
├── package-lock.json
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | npm-debug.log
4 | yarn-error.log
5 | 


--------------------------------------------------------------------------------
/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app" class="container">
 3 |     <h1>Vue Simple Slider</h1>
 4 |     <p>
 5 |       Vue slider component with touch and mouse support. <br>
 6 |       Modern browsers and IE10+ (IE9 should work, but as flex is not supported you'll need to change CSS).
 7 |     </p>
 8 |     <p>
 9 |       <a href="https://github.com/piyushchauhan2011/vue-simple-slider">Download on GitHub</a>
10 |     </p>
11 |     <h2>Slider with default options</h2>
12 |     <ul>
13 |       <li><code>loop: false</code> - Should arrow navigation loop around</li>
14 |       <li><code>selected: 0</code> - Slide to be selected</li>
15 |       <li><code>showArrows: true</code> - Show arrows navigation</li>
16 |       <li><code>showNav: true</code> - Show pager navigation</li>
17 |     </ul>
18 |     <example></example>
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 | import Example from './Example'
24 | 
25 | export default {
26 |   name: 'app',
27 |   components: {
28 |     Example
29 |   }
30 | }
31 | </script>
32 | 
33 | <style>
34 | @import "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css";
35 | 
36 | #app {
37 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
38 |   -webkit-font-smoothing: antialiased;
39 |   -moz-osx-font-smoothing: grayscale;
40 |   color: #2c3e50;
41 |   margin-top: 20px;
42 | }
43 | </style>
44 | 


--------------------------------------------------------------------------------
/Example.js:
--------------------------------------------------------------------------------
 1 | import Slider from './Slider'
 2 | 
 3 | const style = {
 4 |   height: '250px',
 5 |   display: 'flex',
 6 |   justifyContent: 'center',
 7 |   alignItems: 'center',
 8 |   color: '#fafafa'
 9 | }
10 | 
11 | export default {
12 |   components: {
13 |     Slider
14 |   },
15 |   render(h) {
16 |     return (
17 |       <div class='ExampleSliders'>
18 |         <Slider
19 |           loop={false}
20 |           selected={0}
21 |           showArrows={true}
22 |           showNav={true}>
23 |           <div style={{ background: '#21BB9A', ...style }}>
24 |             <h1>A</h1>
25 |           </div>
26 |           <div style={{ background: '#329ADD', ...style }}>
27 |             <h1>B</h1>
28 |           </div>
29 |           <div style={{ background: '#9A5CB9', ...style }}>
30 |             <h1>C</h1>
31 |           </div>
32 |           <div style={{ background: '#E64C3C', ...style }}>
33 |             <h1>D</h1>
34 |           </div>
35 |           <div style={{ background: '#2D3F52', ...style }}>
36 |             <h1>E</h1>
37 |           </div>
38 |         </Slider>
39 |       </div>
40 |     )
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Piyush Chauhan
 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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue Simple Slider
 2 | 
 3 | > vue-simple-slider
 4 | 
 5 | Vue slider component with touch and mouse support.
 6 | 
 7 | Modern browsers and IE10+ (IE9 should work, but as flex is not supported you'll need to change CSS).
 8 | 
 9 | ## Features
10 | 
11 | * Lightweight, no dependencies
12 | * Navigation, pager and arrows
13 | * Swipe and Mouse support, with velocity detection
14 | * Works only with JSX syntax currently
15 | 
16 | ## Usage
17 | 
18 | ```jsx
19 | import 'node_modules/vue-simple-slider/dist/Slider.css'
20 | import Slider from 'vue-simple-slider'
21 | 
22 | const style = {
23 |   height: '250px',
24 |   display: 'flex',
25 |   justifyContent: 'center',
26 |   alignItems: 'center',
27 |   color: '#fafafa'
28 | }
29 | 
30 | export default {
31 |   components: {
32 |     Slider
33 |   },
34 |   render(h) {
35 |     return (
36 |       <Slider>
37 |         <div style={{ background: '#21BB9A', ...style }}>
38 |           <h1>A</h1>
39 |         </div>
40 |         <div style={{ background: '#329ADD', ...style }}>
41 |           <h1>B</h1>
42 |         </div>
43 |         <div style={{ background: '#9A5CB9', ...style }}>
44 |           <h1>C</h1>
45 |         </div>
46 |         <div style={{ background: '#E64C3C', ...style }}>
47 |           <h1>D</h1>
48 |         </div>
49 |         <div style={{ background: '#2D3F52', ...style }}>
50 |           <h1>E</h1>
51 |         </div>
52 |       </Slider>
53 |     )
54 |   }
55 | }
56 | ```
57 | 
58 | ## Screenshot
59 | ![screen shot 2017-06-13 at 2 43 31 am](https://user-images.githubusercontent.com/693487/27049909-5bc66f02-4fe3-11e7-8342-8d3da37a3915.png)
60 | 
61 | ## Build Setup
62 | 
63 | ``` bash
64 | # install dependencies
65 | npm i -g vue-cli
66 | npm install
67 | 
68 | # serve with hot reload at localhost:4000
69 | npm run dev
70 | 
71 | # build for production with minification
72 | npm run build
73 | ```
74 | 
75 | For detailed explanation on how things work, consult the [docs for vue-build](https://github.com/vuejs/vue-cli/blob/master/docs/build.md).
76 | 
77 | 
78 | ## License
79 | vue-simple-slider is open source and released under the [MIT License](LICENSE).
80 | 
81 | Copyright (c) 2017 [Piyush Chauhan](https://twitter.com/piyushpsycho).
82 | 
83 | > *PS: I would love to know if you're using vue-simple-slider. Tweet to me at [@piyushpsycho](https://twitter.com/piyushpsycho)*.
84 | 
85 | ## Credits
86 | Shamelessy copied from react community [React Simple Slider](https://github.com/Stanko/react-slider)


--------------------------------------------------------------------------------
/Slider.css:
--------------------------------------------------------------------------------
  1 | .Slider {
  2 |   overflow: hidden;
  3 |   position: relative;
  4 |   display: -webkit-box;
  5 |   display: -webkit-flex;
  6 |   display: -ms-flexbox;
  7 |   display: flex;
  8 |   -webkit-box-orient: vertical;
  9 |   -webkit-box-direction: normal;
 10 |   -webkit-flex-direction: column;
 11 |   -ms-flex-direction: column;
 12 |   flex-direction: column;
 13 | }
 14 | 
 15 | .Slider-slides {
 16 |   display: -webkit-box;
 17 |   display: -webkit-flex;
 18 |   display: -ms-flexbox;
 19 |   display: flex;
 20 | }
 21 | 
 22 | .Slider-slides--transition {
 23 |   -webkit-transition: -webkit-transform 0.25s;
 24 |   transition: -webkit-transform 0.25s;
 25 |   transition: transform 0.25s;
 26 |   transition: transform 0.25s, -webkit-transform 0.25s;
 27 | }
 28 | 
 29 | .Slider-slides>* {
 30 |   -webkit-flex-basis: 0;
 31 |   -ms-flex-preferred-size: 0;
 32 |   flex-basis: 0;
 33 |   -webkit-box-flex: 1;
 34 |   -webkit-flex-grow: 1;
 35 |   -ms-flex-positive: 1;
 36 |   flex-grow: 1;
 37 | }
 38 | 
 39 | .Slider-slides>* {
 40 |   -webkit-flex-basis: 0;
 41 |   -ms-flex-preferred-size: 0;
 42 |   flex-basis: 0;
 43 |   -webkit-box-flex: 1;
 44 |   -webkit-flex-grow: 1;
 45 |   -ms-flex-positive: 1;
 46 |   flex-grow: 1;
 47 | }
 48 | 
 49 | .Slider-nav {
 50 |   -webkit-align-content: center;
 51 |   -ms-flex-line-pack: center;
 52 |   align-content: center;
 53 |   display: -webkit-box;
 54 |   display: -webkit-flex;
 55 |   display: -ms-flexbox;
 56 |   display: flex;
 57 |   -webkit-box-pack: center;
 58 |   -webkit-justify-content: center;
 59 |   -ms-flex-pack: center;
 60 |   justify-content: center;
 61 |   margin-top: 10px;
 62 |   -webkit-box-ordinal-group: 3;
 63 |   -webkit-order: 2;
 64 |   -ms-flex-order: 2;
 65 |   order: 2;
 66 | }
 67 | 
 68 | .Slider-navButton {
 69 |   background: none;
 70 |   border: 0;
 71 |   height: 20px;
 72 |   opacity: 0.5;
 73 |   outline: none;
 74 |   position: relative;
 75 |   -webkit-transition: opacity 0.25s;
 76 |   transition: opacity 0.25s;
 77 |   width: 20px;
 78 |   padding: 0;
 79 | }
 80 | 
 81 | .Slider-navButton::after {
 82 |   background: #345;
 83 |   border-radius: 50%;
 84 |   content: '';
 85 |   display: block;
 86 |   height: 6px;
 87 |   left: 7px;
 88 |   position: absolute;
 89 |   top: 7px;
 90 |   width: 6px;
 91 | }
 92 | 
 93 | .Slider-navButton--active {
 94 |   opacity: 1;
 95 | }
 96 | 
 97 | .Slider-navButton--active::after {
 98 |   height: 12px;
 99 |   left: 4px;
100 |   opacity: 1;
101 |   top: 4px;
102 |   width: 12px;
103 | }
104 | 
105 | .Slider-arrows {
106 |   height: 0;
107 |   left: 0;
108 |   position: absolute;
109 |   top: calc(50% - 35px);
110 |   width: 100%;
111 |   z-index: 1;
112 | }
113 | 
114 | .Slider-arrows--noNav {
115 |   top: calc(50% - 20px);
116 | }
117 | 
118 | .Slider-arrow {
119 |   background: none;
120 |   border: none;
121 |   height: 40px;
122 |   opacity: 0.5;
123 |   outline: none;
124 |   position: absolute;
125 |   -webkit-transition: opacity 0.25s;
126 |   transition: opacity 0.25s;
127 |   padding: 0px;
128 |   width: 21px;
129 | }
130 | 
131 | .Slider-arrow:hover {
132 |   opacity: 1;
133 | }
134 | 
135 | .Slider-arrow::after,
136 | .Slider-arrow::before {
137 |   background: #fff;
138 |   border-radius: 3px;
139 |   content: '';
140 |   display: block;
141 |   height: 23px;
142 |   position: absolute;
143 |   width: 5px;
144 |   left: 8px;
145 | }
146 | 
147 | .Slider-arrow::before {
148 |   top: 0;
149 | }
150 | 
151 | .Slider-arrow::after {
152 |   bottom: 0;
153 | }
154 | 
155 | .Slider-arrow--left {
156 |   top: 0;
157 |   left: 10px;
158 | }
159 | 
160 | .Slider-arrow--left::before {
161 |   -webkit-transform: rotate(30deg);
162 |   transform: rotate(30deg);
163 | }
164 | 
165 | .Slider-arrow--left::after {
166 |   -webkit-transform: rotate(-30deg);
167 |   transform: rotate(-30deg);
168 | }
169 | 
170 | .Slider-arrow--right {
171 |   top: 0;
172 |   right: 10px;
173 | }
174 | 
175 | .Slider-arrow--right::before {
176 |   -webkit-transform: rotate(-30deg);
177 |   transform: rotate(-30deg);
178 | }
179 | 
180 | .Slider-arrow--right::after {
181 |   -webkit-transform: rotate(30deg);
182 |   transform: rotate(30deg);
183 | }


--------------------------------------------------------------------------------
/Slider.js:
--------------------------------------------------------------------------------
  1 | import './Slider.css'
  2 | 
  3 | export default {
  4 |   props: {
  5 |     loop: {
  6 |       type: Boolean,
  7 |       default: false
  8 |     },
  9 |     selected: {
 10 |       type: Number,
 11 |       default: 0
 12 |     },
 13 |     showArrows: {
 14 |       type: Boolean,
 15 |       default: true
 16 |     },
 17 |     showNav: {
 18 |       type: Boolean,
 19 |       default: true
 20 |     }
 21 |   },
 22 |   data: function () {
 23 |     return {
 24 |       dragStart: 0,
 25 |       dragStartTime: new Date(),
 26 |       transition: false,
 27 |       index: this.$props.selected || 0,
 28 |       lastIndex: this.$props.selected || 0,
 29 |       mouseDown: false
 30 |     }
 31 |   },
 32 |   methods: {
 33 |     goToSlide: function (index, event) {
 34 |       const children = this.$slots.default
 35 |       const {
 36 |         loop,
 37 |       } = this.$props
 38 | 
 39 |       if (event) {
 40 |         event.preventDefault()
 41 |         event.stopPropagation()
 42 |       }
 43 | 
 44 |       if (index < 0) {
 45 |         index = loop ? children.length - 1 : 0
 46 |       } else if (index >= children.length) {
 47 |         index = loop ? 0 : children.length - 1
 48 |       }
 49 | 
 50 |       this.index = index
 51 |       this.lastIndex = index
 52 |       this.transition = true
 53 |     },
 54 |     getDragX: function (event, isTouch) {
 55 |       return isTouch ?
 56 |         event.touches[0].pageX :
 57 |         event.pageX
 58 |     },
 59 |     handleDragStart: function (event, isTouch) {
 60 |       const x = this.getDragX(event, isTouch)
 61 | 
 62 |       this.dragStart = x
 63 |       this.dragStartTime = new Date()
 64 |       this.transition = false
 65 |       this.slideWidth = this.$refs.slider.offsetWidth
 66 |       this.mouseDown = true
 67 |     },
 68 | 
 69 |     handleDragMove: function (event, isTouch) {
 70 |       const {
 71 |         dragStart,
 72 |         lastIndex,
 73 |         slideWidth
 74 |       } = this
 75 | 
 76 |       const x = this.getDragX(event, isTouch)
 77 |       const offset = dragStart - x
 78 |       const percentageOffset = offset / slideWidth
 79 |       const newIndex = lastIndex + percentageOffset
 80 |       const SCROLL_OFFSET_TO_STOP_SCROLL = 30
 81 | 
 82 |       // Stop scrolling if you slide more than 30 pixels
 83 |       if (Math.abs(offset) > SCROLL_OFFSET_TO_STOP_SCROLL) {
 84 |         event.stopPropagation()
 85 |       }
 86 | 
 87 |       this.index = newIndex
 88 |     },
 89 |     handleDragEnd: function () {
 90 |       const children = this.$slots.default
 91 |       const {
 92 |         dragStartTime,
 93 |         index,
 94 |         lastIndex
 95 |       } = this
 96 | 
 97 |       const timeElapsed = new Date().getTime() - dragStartTime.getTime()
 98 |       const offset = lastIndex - index
 99 |       const velocity = Math.round(offset / timeElapsed * 10000)
100 | 
101 |       let newIndex = Math.round(index)
102 | 
103 |       if (Math.abs(velocity) > 5) {
104 |         newIndex = velocity < 0 ? lastIndex + 1 : lastIndex - 1
105 |       }
106 | 
107 |       if (newIndex < 0) {
108 |         newIndex = 0
109 |       } else if (newIndex >= children.length) {
110 |         newIndex = children.length - 1
111 |       }
112 | 
113 |       this.dragStart = 0
114 |       this.index = newIndex
115 |       this.lastIndex = newIndex
116 |       this.transition = true
117 |       this.mouseDown = false
118 |     },
119 |     renderArrows: function (h) {
120 |       const children = this.$slots.default
121 | 
122 |       const {
123 |         loop,
124 |         showNav,
125 |       } = this.$props
126 | 
127 |       const {
128 |         lastIndex
129 |       } = this
130 | 
131 |       const arrowsClasses = showNav ? 'Slider-arrows' : 'Slider-arrows Slider-arrows--noNav'
132 | 
133 |       const leftArrowEl = h(
134 |         'button', {
135 |           class: 'Slider-arrow Slider-arrow--left',
136 |           on: {
137 |             click: (e) => this.goToSlide(lastIndex - 1, e)
138 |           }
139 |         }
140 |       )
141 | 
142 |       const rightArrowEl = h(
143 |         'button', {
144 |           class: 'Slider-arrow Slider-arrow--right',
145 |           on: {
146 |             click: (e) => this.goToSlide(lastIndex + 1, e)
147 |           }
148 |         }
149 |       )
150 | 
151 |       return (
152 |         <div class={arrowsClasses}>
153 |           {loop || lastIndex > 0 ? leftArrowEl : null}
154 |           {loop || lastIndex < children.length - 1 ? rightArrowEl : null}
155 |         </div>
156 |       )
157 |     },
158 |     renderNav: function (h) {
159 |       const children = this.$slots.default
160 |       const {
161 |         lastIndex
162 |       } = this
163 | 
164 |       const nav = children.map((slide, i) => {
165 |         const buttonClasses = i === lastIndex ? 'Slider-navButton Slider-navButton--active' : 'Slider-navButton'
166 | 
167 |         return (
168 |           <button class={buttonClasses} key={i} onClick={(e) => this.goToSlide(i, e)}>
169 |           </button>
170 |         )
171 |       })
172 | 
173 |       return (
174 |         <div class='Slider-nav'>
175 |           {nav}
176 |         </div>
177 |       )
178 |     }
179 |   },
180 |   render(h) {
181 |     const children = this.$slots.default
182 | 
183 |     const {
184 |       showArrows,
185 |       showNav
186 |     } = this.$props
187 | 
188 |     const {
189 |       index,
190 |       transition,
191 |       mouseDown
192 |     } = this
193 | 
194 |     const slidesStyles = {
195 |       width: `${100 * children.length}%`,
196 |       transform: `translateX(${-1 * index * (100 / children.length)}%)`,
197 |     }
198 |     const slidesClasses = transition ? 'Slider-slides Slider-slides--transition' : 'Slider-slides'
199 | 
200 |     return (
201 |       <div class="Slider" ref="slider">
202 |         {showArrows ? this.renderArrows(h) : null}
203 |         {showNav ? this.renderNav(h) : null}
204 |         <div
205 |           class="Slider-inner"
206 |           onTouchstart={(e) => this.handleDragStart(e, true)}
207 |           onTouchmove={(e) => this.handleDragMove(e, true)}
208 |           onTouchend={() => this.handleDragEnd()}
209 |           onMousedown={(e) => this.handleDragStart(e, false)}
210 |           onMousemove={(e) => mouseDown ? this.handleDragMove(e, false) : null}
211 |           onMouseup={(e) => this.handleDragEnd()}
212 |           onMouseout={(e) => this.handleDragEnd()}>
213 |           <div class={slidesClasses} style={slidesStyles}>
214 |             {children}
215 |           </div>
216 |         </div>
217 |       </div>
218 |     )
219 |   }
220 | }
221 | 


--------------------------------------------------------------------------------
/dist/Slider.css:
--------------------------------------------------------------------------------
1 | .Slider{overflow:hidden;position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.Slider,.Slider-slides{display:-webkit-flex;display:-ms-flexbox;display:flex}.Slider-slides--transition{transition:-webkit-transform .25s;transition:transform .25s;transition:transform .25s,-webkit-transform .25s}.Slider-slides>*{-ms-flex-preferred-size:0;-webkit-flex-basis:0;flex-basis:0;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.Slider-nav{-ms-flex-line-pack:center;-webkit-align-content:center;align-content:center;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin-top:10px;-webkit-order:2;-ms-flex-order:2;order:2}.Slider-navButton{background:none;border:0;height:20px;opacity:.5;outline:none;position:relative;transition:opacity .25s;width:20px;padding:0}.Slider-navButton:after{background:#345;border-radius:50%;content:"";display:block;height:6px;left:7px;position:absolute;top:7px;width:6px}.Slider-navButton--active{opacity:1}.Slider-navButton--active:after{height:12px;left:4px;opacity:1;top:4px;width:12px}.Slider-arrows{height:0;left:0;position:absolute;top:calc(50% - 35px);width:100%;z-index:1}.Slider-arrows--noNav{top:calc(50% - 20px)}.Slider-arrow{background:none;border:none;height:40px;opacity:.5;outline:none;position:absolute;transition:opacity .25s;padding:0;width:21px}.Slider-arrow:hover{opacity:1}.Slider-arrow:after,.Slider-arrow:before{background:#fff;border-radius:3px;content:"";display:block;height:23px;position:absolute;width:5px;left:8px}.Slider-arrow:before{top:0}.Slider-arrow:after{bottom:0}.Slider-arrow--left{top:0;left:10px}.Slider-arrow--left:before{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.Slider-arrow--left:after{-webkit-transform:rotate(-30deg);-ms-transform:rotate(-30deg);transform:rotate(-30deg)}.Slider-arrow--right{top:0;right:10px}.Slider-arrow--right:before{-webkit-transform:rotate(-30deg);-ms-transform:rotate(-30deg);transform:rotate(-30deg)}.Slider-arrow--right:after{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}
2 | /*# sourceMappingURL=Slider.css.map*/


--------------------------------------------------------------------------------
/dist/Slider.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack:///./Slider.css"],"names":[],"mappings":"AAAA,QACE,gBACA,kBAOA,8BACA,0BACA,qBAAuB,CAGzB,uBAVE,qBACA,oBACA,YAAc,CAehB,2BAEE,kCACA,0BACA,gDAAqD,CAavD,iBAEE,0BACA,qBAAc,aAEd,oBACA,oBACA,WAAa,CAGf,YAEE,0BACA,6BAAsB,qBAEtB,qBACA,oBACA,aAEA,+BACA,qBACA,uBACA,gBAEA,gBACA,iBACA,OAAS,CAGX,kBACE,gBACA,SACA,YACA,WACA,aACA,kBAEA,wBACA,WACA,SAAW,CAGb,wBACE,gBACA,kBACA,WACA,cACA,WACA,SACA,kBACA,QACA,SAAW,CAGb,0BACE,SAAW,CAGb,gCACE,YACA,SACA,UACA,QACA,UAAY,CAGd,eACE,SACA,OACA,kBACA,qBACA,WACA,SAAW,CAGb,sBACE,oBAAsB,CAGxB,cACE,gBACA,YACA,YACA,WACA,aACA,kBAEA,wBACA,UACA,UAAY,CAGd,oBACE,SAAW,CAGb,yCAEE,gBACA,kBACA,WACA,cACA,YACA,kBACA,UACA,QAAU,CAGZ,qBACE,KAAO,CAGT,oBACE,QAAU,CAGZ,oBACE,MACA,SAAW,CAGb,2BACE,gCACA,4BAAyB,wBAG3B,0BACE,iCACA,6BAA0B,yBAG5B,qBACE,MACA,UAAY,CAGd,4BACE,iCACA,6BAA0B,yBAG5B,2BACE,gCACA,4BAAyB","file":"Slider.css","sourcesContent":[".Slider {\n  overflow: hidden;\n  position: relative;\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: column;\n  -ms-flex-direction: column;\n  flex-direction: column;\n}\n\n.Slider-slides {\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.Slider-slides--transition {\n  -webkit-transition: -webkit-transform 0.25s;\n  transition: -webkit-transform 0.25s;\n  transition: transform 0.25s;\n  transition: transform 0.25s, -webkit-transform 0.25s;\n}\n\n.Slider-slides>* {\n  -webkit-flex-basis: 0;\n  -ms-flex-preferred-size: 0;\n  flex-basis: 0;\n  -webkit-box-flex: 1;\n  -webkit-flex-grow: 1;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n}\n\n.Slider-slides>* {\n  -webkit-flex-basis: 0;\n  -ms-flex-preferred-size: 0;\n  flex-basis: 0;\n  -webkit-box-flex: 1;\n  -webkit-flex-grow: 1;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n}\n\n.Slider-nav {\n  -webkit-align-content: center;\n  -ms-flex-line-pack: center;\n  align-content: center;\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n  -ms-flex-pack: center;\n  justify-content: center;\n  margin-top: 10px;\n  -webkit-box-ordinal-group: 3;\n  -webkit-order: 2;\n  -ms-flex-order: 2;\n  order: 2;\n}\n\n.Slider-navButton {\n  background: none;\n  border: 0;\n  height: 20px;\n  opacity: 0.5;\n  outline: none;\n  position: relative;\n  -webkit-transition: opacity 0.25s;\n  transition: opacity 0.25s;\n  width: 20px;\n  padding: 0;\n}\n\n.Slider-navButton::after {\n  background: #345;\n  border-radius: 50%;\n  content: '';\n  display: block;\n  height: 6px;\n  left: 7px;\n  position: absolute;\n  top: 7px;\n  width: 6px;\n}\n\n.Slider-navButton--active {\n  opacity: 1;\n}\n\n.Slider-navButton--active::after {\n  height: 12px;\n  left: 4px;\n  opacity: 1;\n  top: 4px;\n  width: 12px;\n}\n\n.Slider-arrows {\n  height: 0;\n  left: 0;\n  position: absolute;\n  top: calc(50% - 35px);\n  width: 100%;\n  z-index: 1;\n}\n\n.Slider-arrows--noNav {\n  top: calc(50% - 20px);\n}\n\n.Slider-arrow {\n  background: none;\n  border: none;\n  height: 40px;\n  opacity: 0.5;\n  outline: none;\n  position: absolute;\n  -webkit-transition: opacity 0.25s;\n  transition: opacity 0.25s;\n  padding: 0px;\n  width: 21px;\n}\n\n.Slider-arrow:hover {\n  opacity: 1;\n}\n\n.Slider-arrow::after,\n.Slider-arrow::before {\n  background: #fff;\n  border-radius: 3px;\n  content: '';\n  display: block;\n  height: 23px;\n  position: absolute;\n  width: 5px;\n  left: 8px;\n}\n\n.Slider-arrow::before {\n  top: 0;\n}\n\n.Slider-arrow::after {\n  bottom: 0;\n}\n\n.Slider-arrow--left {\n  top: 0;\n  left: 10px;\n}\n\n.Slider-arrow--left::before {\n  -webkit-transform: rotate(30deg);\n  transform: rotate(30deg);\n}\n\n.Slider-arrow--left::after {\n  -webkit-transform: rotate(-30deg);\n  transform: rotate(-30deg);\n}\n\n.Slider-arrow--right {\n  top: 0;\n  right: 10px;\n}\n\n.Slider-arrow--right::before {\n  -webkit-transform: rotate(-30deg);\n  transform: rotate(-30deg);\n}\n\n.Slider-arrow--right::after {\n  -webkit-transform: rotate(30deg);\n  transform: rotate(30deg);\n}\n\n\n// WEBPACK FOOTER //\n// ./Slider.css"],"sourceRoot":""}


--------------------------------------------------------------------------------
/dist/Slider.js:
--------------------------------------------------------------------------------
1 | (function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Slider=e():t.Slider=e()})(this,function(){return function(t){function e(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="/",e(e.s=2)}([function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(1);n.n(r);e.default={props:{loop:{type:Boolean,default:!1},selected:{type:Number,default:0},showArrows:{type:Boolean,default:!0},showNav:{type:Boolean,default:!0}},data:function(){return{dragStart:0,dragStartTime:new Date,transition:!1,index:this.$props.selected||0,lastIndex:this.$props.selected||0,mouseDown:!1}},methods:{goToSlide:function(t,e){var n=this.$slots.default,r=this.$props.loop;e&&(e.preventDefault(),e.stopPropagation()),t<0?t=r?n.length-1:0:t>=n.length&&(t=r?0:n.length-1),this.index=t,this.lastIndex=t,this.transition=!0},getDragX:function(t,e){return e?t.touches[0].pageX:t.pageX},handleDragStart:function(t,e){var n=this.getDragX(t,e);this.dragStart=n,this.dragStartTime=new Date,this.transition=!1,this.slideWidth=this.$refs.slider.offsetWidth,this.mouseDown=!0},handleDragMove:function(t,e){var n=this.dragStart,r=this.lastIndex,o=this.slideWidth,i=this.getDragX(t,e),s=n-i,a=s/o,l=r+a;Math.abs(s)>30&&t.stopPropagation(),this.index=l},handleDragEnd:function(){var t=this.$slots.default,e=this.dragStartTime,n=this.index,r=this.lastIndex,o=(new Date).getTime()-e.getTime(),i=r-n,s=Math.round(i/o*1e4),a=Math.round(n);Math.abs(s)>5&&(a=s<0?r+1:r-1),a<0?a=0:a>=t.length&&(a=t.length-1),this.dragStart=0,this.index=a,this.lastIndex=a,this.transition=!0,this.mouseDown=!1},renderArrows:function(t){var e=this,n=this.$slots.default,r=this.$props,o=r.loop,i=r.showNav,s=this.lastIndex,a=i?"Slider-arrows":"Slider-arrows Slider-arrows--noNav",l=t("button",{class:"Slider-arrow Slider-arrow--left",on:{click:function(t){return e.goToSlide(s-1,t)}}}),d=t("button",{class:"Slider-arrow Slider-arrow--right",on:{click:function(t){return e.goToSlide(s+1,t)}}});return t("div",{class:a},[o||s>0?l:null,o||s<n.length-1?d:null])},renderNav:function(t){var e=this,n=this.$slots.default,r=this.lastIndex,o=n.map(function(n,o){return t("button",{class:o===r?"Slider-navButton Slider-navButton--active":"Slider-navButton",key:o,on:{click:function(t){return e.goToSlide(o,t)}}},[])});return t("div",{class:"Slider-nav"},[o])}},render:function(t){var e=this,n=this.$slots.default,r=this.$props,o=r.showArrows,i=r.showNav,s=this.index,a=this.transition,l=this.mouseDown,d={width:100*n.length+"%",transform:"translateX("+-1*s*(100/n.length)+"%)"},u=a?"Slider-slides Slider-slides--transition":"Slider-slides";return t("div",{class:"Slider",ref:"slider"},[o?this.renderArrows(t):null,i?this.renderNav(t):null,t("div",{class:"Slider-inner",on:{touchstart:function(t){return e.handleDragStart(t,!0)},touchmove:function(t){return e.handleDragMove(t,!0)},touchend:function(){return e.handleDragEnd()},mousedown:function(t){return e.handleDragStart(t,!1)},mousemove:function(t){return l?e.handleDragMove(t,!1):null},mouseup:function(t){return e.handleDragEnd()},mouseout:function(t){return e.handleDragEnd()}}},[t("div",{class:u,style:d},[n])])])}}},function(t,e){},function(t,e,n){t.exports=n(0)}])});
2 | //# sourceMappingURL=Slider.js.map


--------------------------------------------------------------------------------
/dist/Slider.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///Slider.js","webpack:///webpack/bootstrap ad98e8e54ea921a7a660","webpack:///./Slider.js"],"names":["root","factory","exports","module","define","amd","this","modules","__webpack_require__","moduleId","installedModules","i","l","call","m","c","value","d","name","getter","o","Object","defineProperty","configurable","enumerable","get","n","__esModule","object","property","prototype","hasOwnProperty","p","s","__webpack_exports__","__WEBPACK_IMPORTED_MODULE_0__Slider_css__","props","loop","type","Boolean","default","selected","Number","showArrows","showNav","data","dragStart","dragStartTime","Date","transition","index","$props","lastIndex","mouseDown","methods","goToSlide","event","children","$slots","preventDefault","stopPropagation","length","getDragX","isTouch","touches","pageX","handleDragStart","x","slideWidth","$refs","slider","offsetWidth","handleDragMove","offset","percentageOffset","newIndex","Math","abs","handleDragEnd","timeElapsed","getTime","velocity","round","renderArrows","h","_this","_$props","arrowsClasses","leftArrowEl","class","on","click","e","rightArrowEl","renderNav","_this2","nav","map","slide","key","render","_this3","_$props2","slidesStyles","width","transform","slidesClasses","ref","touchstart","touchmove","touchend","mousedown","mousemove","mouseup","mouseout","style"],"mappings":"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","file":"Slider.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"Slider\"] = factory();\n\telse\n\t\troot[\"Slider\"] = factory();\n})(this, function() {\nreturn \n\n\n// WEBPACK FOOTER //\n// webpack/universalModuleDefinition","(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"Slider\"] = factory();\n\telse\n\t\troot[\"Slider\"] = factory();\n})(this, function() {\nreturn /******/ (function(modules) { // webpackBootstrap\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/******/\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId]) {\n/******/ \t\t\treturn installedModules[moduleId].exports;\n/******/ \t\t}\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\ti: moduleId,\n/******/ \t\t\tl: false,\n/******/ \t\t\texports: {}\n/******/ \t\t};\n/******/\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n/******/\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.l = true;\n/******/\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/\n/******/\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n/******/\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n/******/\n/******/ \t// identity function for calling harmony imports with the correct context\n/******/ \t__webpack_require__.i = function(value) { return value; };\n/******/\n/******/ \t// define getter function for harmony exports\n/******/ \t__webpack_require__.d = function(exports, name, getter) {\n/******/ \t\tif(!__webpack_require__.o(exports, name)) {\n/******/ \t\t\tObject.defineProperty(exports, name, {\n/******/ \t\t\t\tconfigurable: false,\n/******/ \t\t\t\tenumerable: true,\n/******/ \t\t\t\tget: getter\n/******/ \t\t\t});\n/******/ \t\t}\n/******/ \t};\n/******/\n/******/ \t// getDefaultExport function for compatibility with non-harmony modules\n/******/ \t__webpack_require__.n = function(module) {\n/******/ \t\tvar getter = module && module.__esModule ?\n/******/ \t\t\tfunction getDefault() { return module['default']; } :\n/******/ \t\t\tfunction getModuleExports() { return module; };\n/******/ \t\t__webpack_require__.d(getter, 'a', getter);\n/******/ \t\treturn getter;\n/******/ \t};\n/******/\n/******/ \t// Object.prototype.hasOwnProperty.call\n/******/ \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n/******/\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"/\";\n/******/\n/******/ \t// Load entry module and return exports\n/******/ \treturn __webpack_require__(__webpack_require__.s = 2);\n/******/ })\n/************************************************************************/\n/******/ ([\n/* 0 */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\nObject.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Slider_css__ = __webpack_require__(1);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Slider_css___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__Slider_css__);\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  props: {\n    loop: {\n      type: Boolean,\n      default: false\n    },\n    selected: {\n      type: Number,\n      default: 0\n    },\n    showArrows: {\n      type: Boolean,\n      default: true\n    },\n    showNav: {\n      type: Boolean,\n      default: true\n    }\n  },\n  data: function data() {\n    return {\n      dragStart: 0,\n      dragStartTime: new Date(),\n      transition: false,\n      index: this.$props.selected || 0,\n      lastIndex: this.$props.selected || 0,\n      mouseDown: false\n    };\n  },\n  methods: {\n    goToSlide: function goToSlide(index, event) {\n      var children = this.$slots.default;\n      var loop = this.$props.loop;\n\n\n      if (event) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n\n      if (index < 0) {\n        index = loop ? children.length - 1 : 0;\n      } else if (index >= children.length) {\n        index = loop ? 0 : children.length - 1;\n      }\n\n      this.index = index;\n      this.lastIndex = index;\n      this.transition = true;\n    },\n    getDragX: function getDragX(event, isTouch) {\n      return isTouch ? event.touches[0].pageX : event.pageX;\n    },\n    handleDragStart: function handleDragStart(event, isTouch) {\n      var x = this.getDragX(event, isTouch);\n\n      this.dragStart = x;\n      this.dragStartTime = new Date();\n      this.transition = false;\n      this.slideWidth = this.$refs.slider.offsetWidth;\n      this.mouseDown = true;\n    },\n\n    handleDragMove: function handleDragMove(event, isTouch) {\n      var dragStart = this.dragStart,\n          lastIndex = this.lastIndex,\n          slideWidth = this.slideWidth;\n\n\n      var x = this.getDragX(event, isTouch);\n      var offset = dragStart - x;\n      var percentageOffset = offset / slideWidth;\n      var newIndex = lastIndex + percentageOffset;\n      var SCROLL_OFFSET_TO_STOP_SCROLL = 30;\n\n      // Stop scrolling if you slide more than 30 pixels\n      if (Math.abs(offset) > SCROLL_OFFSET_TO_STOP_SCROLL) {\n        event.stopPropagation();\n      }\n\n      this.index = newIndex;\n    },\n    handleDragEnd: function handleDragEnd() {\n      var children = this.$slots.default;\n      var dragStartTime = this.dragStartTime,\n          index = this.index,\n          lastIndex = this.lastIndex;\n\n\n      var timeElapsed = new Date().getTime() - dragStartTime.getTime();\n      var offset = lastIndex - index;\n      var velocity = Math.round(offset / timeElapsed * 10000);\n\n      var newIndex = Math.round(index);\n\n      if (Math.abs(velocity) > 5) {\n        newIndex = velocity < 0 ? lastIndex + 1 : lastIndex - 1;\n      }\n\n      if (newIndex < 0) {\n        newIndex = 0;\n      } else if (newIndex >= children.length) {\n        newIndex = children.length - 1;\n      }\n\n      this.dragStart = 0;\n      this.index = newIndex;\n      this.lastIndex = newIndex;\n      this.transition = true;\n      this.mouseDown = false;\n    },\n    renderArrows: function renderArrows(h) {\n      var _this = this;\n\n      var children = this.$slots.default;\n\n      var _$props = this.$props,\n          loop = _$props.loop,\n          showNav = _$props.showNav;\n      var lastIndex = this.lastIndex;\n\n\n      var arrowsClasses = showNav ? 'Slider-arrows' : 'Slider-arrows Slider-arrows--noNav';\n\n      var leftArrowEl = h('button', {\n        class: 'Slider-arrow Slider-arrow--left',\n        on: {\n          click: function click(e) {\n            return _this.goToSlide(lastIndex - 1, e);\n          }\n        }\n      });\n\n      var rightArrowEl = h('button', {\n        class: 'Slider-arrow Slider-arrow--right',\n        on: {\n          click: function click(e) {\n            return _this.goToSlide(lastIndex + 1, e);\n          }\n        }\n      });\n\n      return h(\n        'div',\n        { 'class': arrowsClasses },\n        [loop || lastIndex > 0 ? leftArrowEl : null, loop || lastIndex < children.length - 1 ? rightArrowEl : null]\n      );\n    },\n    renderNav: function renderNav(h) {\n      var _this2 = this;\n\n      var children = this.$slots.default;\n      var lastIndex = this.lastIndex;\n\n\n      var nav = children.map(function (slide, i) {\n        var buttonClasses = i === lastIndex ? 'Slider-navButton Slider-navButton--active' : 'Slider-navButton';\n\n        return h(\n          'button',\n          { 'class': buttonClasses, key: i, on: {\n              'click': function click(e) {\n                return _this2.goToSlide(i, e);\n              }\n            }\n          },\n          []\n        );\n      });\n\n      return h(\n        'div',\n        { 'class': 'Slider-nav' },\n        [nav]\n      );\n    }\n  },\n  render: function render(h) {\n    var _this3 = this;\n\n    var children = this.$slots.default;\n\n    var _$props2 = this.$props,\n        showArrows = _$props2.showArrows,\n        showNav = _$props2.showNav;\n    var index = this.index,\n        transition = this.transition,\n        mouseDown = this.mouseDown;\n\n\n    var slidesStyles = {\n      width: 100 * children.length + '%',\n      transform: 'translateX(' + -1 * index * (100 / children.length) + '%)'\n    };\n    var slidesClasses = transition ? 'Slider-slides Slider-slides--transition' : 'Slider-slides';\n\n    return h(\n      'div',\n      { 'class': 'Slider', ref: 'slider' },\n      [showArrows ? this.renderArrows(h) : null, showNav ? this.renderNav(h) : null, h(\n        'div',\n        {\n          'class': 'Slider-inner',\n          on: {\n            'touchstart': function touchstart(e) {\n              return _this3.handleDragStart(e, true);\n            },\n            'touchmove': function touchmove(e) {\n              return _this3.handleDragMove(e, true);\n            },\n            'touchend': function touchend() {\n              return _this3.handleDragEnd();\n            },\n            'mousedown': function mousedown(e) {\n              return _this3.handleDragStart(e, false);\n            },\n            'mousemove': function mousemove(e) {\n              return mouseDown ? _this3.handleDragMove(e, false) : null;\n            },\n            'mouseup': function mouseup(e) {\n              return _this3.handleDragEnd();\n            },\n            'mouseout': function mouseout(e) {\n              return _this3.handleDragEnd();\n            }\n          }\n        },\n        [h(\n          'div',\n          { 'class': slidesClasses, style: slidesStyles },\n          [children]\n        )]\n      )]\n    );\n  }\n});\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNsaWRlci5qcyJdLCJuYW1lcyI6WyJwcm9wcyIsImxvb3AiLCJ0eXBlIiwiQm9vbGVhbiIsImRlZmF1bHQiLCJzZWxlY3RlZCIsIk51bWJlciIsInNob3dBcnJvd3MiLCJzaG93TmF2IiwiZGF0YSIsImRyYWdTdGFydCIsImRyYWdTdGFydFRpbWUiLCJEYXRlIiwidHJhbnNpdGlvbiIsImluZGV4IiwiJHByb3BzIiwibGFzdEluZGV4IiwibW91c2VEb3duIiwibWV0aG9kcyIsImdvVG9TbGlkZSIsImV2ZW50IiwiY2hpbGRyZW4iLCIkc2xvdHMiLCJwcmV2ZW50RGVmYXVsdCIsInN0b3BQcm9wYWdhdGlvbiIsImxlbmd0aCIsImdldERyYWdYIiwiaXNUb3VjaCIsInRvdWNoZXMiLCJwYWdlWCIsImhhbmRsZURyYWdTdGFydCIsIngiLCJzbGlkZVdpZHRoIiwiJHJlZnMiLCJzbGlkZXIiLCJvZmZzZXRXaWR0aCIsImhhbmRsZURyYWdNb3ZlIiwib2Zmc2V0IiwicGVyY2VudGFnZU9mZnNldCIsIm5ld0luZGV4IiwiU0NST0xMX09GRlNFVF9UT19TVE9QX1NDUk9MTCIsIk1hdGgiLCJhYnMiLCJoYW5kbGVEcmFnRW5kIiwidGltZUVsYXBzZWQiLCJnZXRUaW1lIiwidmVsb2NpdHkiLCJyb3VuZCIsInJlbmRlckFycm93cyIsImgiLCJhcnJvd3NDbGFzc2VzIiwibGVmdEFycm93RWwiLCJjbGFzcyIsIm9uIiwiY2xpY2siLCJlIiwicmlnaHRBcnJvd0VsIiwicmVuZGVyTmF2IiwibmF2IiwibWFwIiwic2xpZGUiLCJpIiwiYnV0dG9uQ2xhc3NlcyIsInJlbmRlciIsInNsaWRlc1N0eWxlcyIsIndpZHRoIiwidHJhbnNmb3JtIiwic2xpZGVzQ2xhc3NlcyJdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxjQUFQOztBQUVBLGVBQWU7QUFDYkEsU0FBTztBQUNMQyxVQUFNO0FBQ0pDLFlBQU1DLE9BREY7QUFFSkMsZUFBUztBQUZMLEtBREQ7QUFLTEMsY0FBVTtBQUNS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Q00sQ0FBRDtBQUFBLHFCQUFPLE9BQUt6QixlQUFMLENBQXFCeUIsQ0FBckIsRUFBd0IsSUFBeEIsQ0FBUDtBQUFBLGFBRmhCO0FBQUEseUJBR2UsbUJBQUNBLENBQUQ7QUFBQSxxQkFBTyxPQUFLbkIsY0FBTCxDQUFvQm1CLENBQXBCLEVBQXVCLElBQXZCLENBQVA7QUFBQSxhQUhmO0FBQUEsd0JBSWM7QUFBQSxxQkFBTSxPQUFLWixhQUFMLEVBQU47QUFBQSxhQUpkO0FBQUEseUJBS2UsbUJBQUNZLENBQUQ7QUFBQSxxQkFBTyxPQUFLekIsZUFBTCxDQUFxQnlCLENBQXJCLEVBQXdCLEtBQXhCLENBQVA7QUFBQSxhQUxmO0FBQUEseUJBTWUsbUJBQUNBLENBQUQ7QUFBQSxxQkFBT3RDLFlBQVksT0FBS21CLGNBQUwsQ0FBb0JtQixDQUFwQixFQUF1QixLQUF2QixDQUFaLEdBQTRDLElBQW5EO0FBQUEsYUFOZjtBQUFBLHVCQU9hLGlCQUFDQSxDQUFEO0FBQUEscUJBQU8sT0FBS1osYUFBTCxFQUFQO0FBQUEsYUFQYjtBQUFBLHdCQVFjLGtCQUFDWSxDQUFEO0FBQUEscUJBQU8sT0FBS1osYUFBTCxFQUFQO0FBQUE7QUFSZDtBQUFBO0FBQUEsU0FTRTtBQUFBO0FBQUEsWUFBSyxTQUFPd0IsYUFBWixFQUEyQixPQUFPSCxZQUFsQztBQUFBLFdBQ0czQyxRQURIO0FBQUEsU0FURjtBQUFBLE9BSEY7QUFBQSxLQURGO0FBbUJEO0FBeE5ZLENBQWYiLCJmaWxlIjoiU2xpZGVyLmpzIiwic291cmNlUm9vdCI6Ii9Vc2Vycy9waXl1c2hjaGF1aGFuL0RvY3VtZW50cy9qaXJuZXh1L3Z1ZS1zaW1wbGUtc2xpZGVyIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICcuL1NsaWRlci5jc3MnXG5cbmV4cG9ydCBkZWZhdWx0IHtcbiAgcHJvcHM6IHtcbiAgICBsb29wOiB7XG4gICAgICB0eXBlOiBCb29sZWFuLFxuICAgICAgZGVmYXVsdDogZmFsc2VcbiAgICB9LFxuICAgIHNlbGVjdGVkOiB7XG4gICAgICB0eXBlOiBOdW1iZXIsXG4gICAgICBkZWZhdWx0OiAwXG4gICAgfSxcbiAgICBzaG93QXJyb3dzOiB7XG4gICAgICB0eXBlOiBCb29sZWFuLFxuICAgICAgZGVmYXVsdDogdHJ1ZVxuICAgIH0sXG4gICAgc2hvd05hdjoge1xuICAgICAgdHlwZTogQm9vbGVhbixcbiAgICAgIGRlZmF1bHQ6IHRydWVcbiAgICB9XG4gIH0sXG4gIGRhdGE6IGZ1bmN0aW9uICgpIHtcbiAgICByZXR1cm4ge1xuICAgICAgZHJhZ1N0YXJ0OiAwLFxuICAgICAgZHJhZ1N0YXJ0VGltZTogbmV3IERhdGUoKSxcbiAgICAgIHRyYW5zaXRpb246IGZhbHNlLFxuICAgICAgaW5kZXg6IHRoaXMuJHByb3BzLnNlbGVjdGVkIHx8IDAsXG4gICAgICBsYXN0SW5kZXg6IHRoaXMuJHByb3BzLnNlbGVjdGVkIHx8IDAsXG4gICAgICBtb3VzZURvd246IGZhbHNlXG4gICAgfVxuICB9LFxuICBtZXRob2RzOiB7XG4gICAgZ29Ub1NsaWRlOiBmdW5jdGlvbiAoaW5kZXgsIGV2ZW50KSB7XG4gICAgICBjb25zdCBjaGlsZHJlbiA9IHRoaXMuJHNsb3RzLmRlZmF1bHRcbiAgICAgIGNvbnN0IHtcbiAgICAgICAgbG9vcCxcbiAgICAgIH0gPSB0aGlzLiRwcm9wc1xuXG4gICAgICBpZiAoZXZlbnQpIHtcbiAgICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKVxuICAgICAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKVxuICAgICAgfVxuXG4gICAgICBpZiAoaW5kZXggPCAwKSB7XG4gICAgICAgIGluZGV4ID0gbG9vcCA/IGNoaWxkcmVuLmxlbmd0aCAtIDEgOiAwXG4gICAgICB9IGVsc2UgaWYgKGluZGV4ID49IGNoaWxkcmVuLmxlbmd0aCkge1xuICAgICAgICBpbmRleCA9IGxvb3AgPyAwIDogY2hpbGRyZW4ubGVuZ3RoIC0gMVxuICAgICAgfVxuXG4gICAgICB0aGlzLmluZGV4ID0gaW5kZXhcbiAgICAgIHRoaXMubGFzdEluZGV4ID0gaW5kZXhcbiAgICAgIHRoaXMudHJhbnNpdGlvbiA9IHRydWVcbiAgICB9LFxuICAgIGdldERyYWdYOiBmdW5jdGlvbiAoZXZlbnQsIGlzVG91Y2gpIHtcbiAgICAgIHJldHVybiBpc1RvdWNoID9cbiAgICAgICAgZXZlbnQudG91Y2hlc1swXS5wYWdlWCA6XG4gICAgICAgIGV2ZW50LnBhZ2VYXG4gICAgfSxcbiAgICBoYW5kbGVEcmFnU3RhcnQ6IGZ1bmN0aW9uIChldmVudCwgaXNUb3VjaCkge1xuICAgICAgY29uc3QgeCA9IHRoaXMuZ2V0RHJhZ1goZXZlbnQsIGlzVG91Y2gpXG5cbiAgICAgIHRoaXMuZHJhZ1N0YXJ0ID0geFxuICAgICAgdGhpcy5kcmFnU3RhcnRUaW1lID0gbmV3IERhdGUoKVxuICAgICAgdGhpcy50cmFuc2l0aW9uID0gZmFsc2VcbiAgICAgIHRoaXMuc2xpZGVXaWR0aCA9IHRoaXMuJHJlZnMuc2xpZGVyLm9mZnNldFdpZHRoXG4gICAgICB0aGlzLm1vdXNlRG93biA9IHRydWVcbiAgICB9LFxuXG4gICAgaGFuZGxlRHJhZ01vdmU6IGZ1bmN0aW9uIChldmVudCwgaXNUb3VjaCkge1xuICAgICAgY29uc3Qge1xuICAgICAgICBkcmFnU3RhcnQsXG4gICAgICAgIGxhc3RJbmRleCxcbiAgICAgICAgc2xpZGVXaWR0aFxuICAgICAgfSA9IHRoaXNcblxuICAgICAgY29uc3QgeCA9IHRoaXMuZ2V0RHJhZ1goZXZlbnQsIGlzVG91Y2gpXG4gICAgICBjb25zdCBvZmZzZXQgPSBkcmFnU3RhcnQgLSB4XG4gICAgICBjb25zdCBwZXJjZW50YWdlT2Zmc2V0ID0gb2Zmc2V0IC8gc2xpZGVXaWR0aFxuICAgICAgY29uc3QgbmV3SW5kZXggPSBsYXN0SW5kZXggKyBwZXJjZW50YWdlT2Zmc2V0XG4gICAgICBjb25zdCBTQ1JPTExfT0ZGU0VUX1RPX1NUT1BfU0NST0xMID0gMzBcblxuICAgICAgLy8gU3RvcCBzY3JvbGxpbmcgaWYgeW91IHNsaWRlIG1vcmUgdGhhbiAzMCBwaXhlbHNcbiAgICAgIGlmIChNYXRoLmFicyhvZmZzZXQpID4gU0NST0xMX09GRlNFVF9UT19TVE9QX1NDUk9MTCkge1xuICAgICAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKVxuICAgICAgfVxuXG4gICAgICB0aGlzLmluZGV4ID0gbmV3SW5kZXhcbiAgICB9LFxuICAgIGhhbmRsZURyYWdFbmQ6IGZ1bmN0aW9uICgpIHtcbiAgICAgIGNvbnN0IGNoaWxkcmVuID0gdGhpcy4kc2xvdHMuZGVmYXVsdFxuICAgICAgY29uc3Qge1xuICAgICAgICBkcmFnU3RhcnRUaW1lLFxuICAgICAgICBpbmRleCxcbiAgICAgICAgbGFzdEluZGV4XG4gICAgICB9ID0gdGhpc1xuXG4gICAgICBjb25zdCB0aW1lRWxhcHNlZCA9IG5ldyBEYXRlKCkuZ2V0VGltZSgpIC0gZHJhZ1N0YXJ0VGltZS5nZXRUaW1lKClcbiAgICAgIGNvbnN0IG9mZnNldCA9IGxhc3RJbmRleCAtIGluZGV4XG4gICAgICBjb25zdCB2ZWxvY2l0eSA9IE1hdGgucm91bmQob2Zmc2V0IC8gdGltZUVsYXBzZWQgKiAxMDAwMClcblxuICAgICAgbGV0IG5ld0luZGV4ID0gTWF0aC5yb3VuZChpbmRleClcblxuICAgICAgaWYgKE1hdGguYWJzKHZlbG9jaXR5KSA+IDUpIHtcbiAgICAgICAgbmV3SW5kZXggPSB2ZWxvY2l0eSA8IDAgPyBsYXN0SW5kZXggKyAxIDogbGFzdEluZGV4IC0gMVxuICAgICAgfVxuXG4gICAgICBpZiAobmV3SW5kZXggPCAwKSB7XG4gICAgICAgIG5ld0luZGV4ID0gMFxuICAgICAgfSBlbHNlIGlmIChuZXdJbmRleCA+PSBjaGlsZHJlbi5sZW5ndGgpIHtcbiAgICAgICAgbmV3SW5kZXggPSBjaGlsZHJlbi5sZW5ndGggLSAxXG4gICAgICB9XG5cbiAgICAgIHRoaXMuZHJhZ1N0YXJ0ID0gMFxuICAgICAgdGhpcy5pbmRleCA9IG5ld0luZGV4XG4gICAgICB0aGlzLmxhc3RJbmRleCA9IG5ld0luZGV4XG4gICAgICB0aGlzLnRyYW5zaXRpb24gPSB0cnVlXG4gICAgICB0aGlzLm1vdXNlRG93biA9IGZhbHNlXG4gICAgfSxcbiAgICByZW5kZXJBcnJvd3M6IGZ1bmN0aW9uIChoKSB7XG4gICAgICBjb25zdCBjaGlsZHJlbiA9IHRoaXMuJHNsb3RzLmRlZmF1bHRcblxuICAgICAgY29uc3Qge1xuICAgICAgICBsb29wLFxuICAgICAgICBzaG93TmF2LFxuICAgICAgfSA9IHRoaXMuJHByb3BzXG5cbiAgICAgIGNvbnN0IHtcbiAgICAgICAgbGFzdEluZGV4XG4gICAgICB9ID0gdGhpc1xuXG4gICAgICBjb25zdCBhcnJvd3NDbGFzc2VzID0gc2hvd05hdiA/ICdTbGlkZXItYXJyb3dzJyA6ICdTbGlkZXItYXJyb3dzIFNsaWRlci1hcnJvd3MtLW5vTmF2J1xuXG4gICAgICBjb25zdCBsZWZ0QXJyb3dFbCA9IGgoXG4gICAgICAgICdidXR0b24nLCB7XG4gICAgICAgICAgY2xhc3M6ICdTbGlkZXItYXJyb3cgU2xpZGVyLWFycm93LS1sZWZ0JyxcbiAgICAgICAgICBvbjoge1xuICAgICAgICAgICAgY2xpY2s6IChlKSA9PiB0aGlzLmdvVG9TbGlkZShsYXN0SW5kZXggLSAxLCBlKVxuICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgICAgKVxuXG4gICAgICBjb25zdCByaWdodEFycm93RWwgPSBoKFxuICAgICAgICAnYnV0dG9uJywge1xuICAgICAgICAgIGNsYXNzOiAnU2xpZGVyLWFycm93IFNsaWRlci1hcnJvdy0tcmlnaHQnLFxuICAgICAgICAgIG9uOiB7XG4gICAgICAgICAgICBjbGljazogKGUpID0+IHRoaXMuZ29Ub1NsaWRlKGxhc3RJbmRleCArIDEsIGUpXG4gICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICApXG5cbiAgICAgIHJldHVybiAoXG4gICAgICAgIDxkaXYgY2xhc3M9e2Fycm93c0NsYXNzZXN9PlxuICAgICAgICAgIHtsb29wIHx8IGxhc3RJbmRleCA+IDAgPyBsZWZ0QXJyb3dFbCA6IG51bGx9XG4gICAgICAgICAge2xvb3AgfHwgbGFzdEluZGV4IDwgY2hpbGRyZW4ubGVuZ3RoIC0gMSA/IHJpZ2h0QXJyb3dFbCA6IG51bGx9XG4gICAgICAgIDwvZGl2PlxuICAgICAgKVxuICAgIH0sXG4gICAgcmVuZGVyTmF2OiBmdW5jdGlvbiAoaCkge1xuICAgICAgY29uc3QgY2hpbGRyZW4gPSB0aGlzLiRzbG90cy5kZWZhdWx0XG4gICAgICBjb25zdCB7XG4gICAgICAgIGxhc3RJbmRleFxuICAgICAgfSA9IHRoaXNcblxuICAgICAgY29uc3QgbmF2ID0gY2hpbGRyZW4ubWFwKChzbGlkZSwgaSkgPT4ge1xuICAgICAgICBjb25zdCBidXR0b25DbGFzc2VzID0gaSA9PT0gbGFzdEluZGV4ID8gJ1NsaWRlci1uYXZCdXR0b24gU2xpZGVyLW5hdkJ1dHRvbi0tYWN0aXZlJyA6ICdTbGlkZXItbmF2QnV0dG9uJ1xuXG4gICAgICAgIHJldHVybiAoXG4gICAgICAgICAgPGJ1dHRvbiBjbGFzcz17YnV0dG9uQ2xhc3Nlc30ga2V5PXtpfSBvbkNsaWNrPXsoZSkgPT4gdGhpcy5nb1RvU2xpZGUoaSwgZSl9PlxuICAgICAgICAgIDwvYnV0dG9uPlxuICAgICAgICApXG4gICAgICB9KVxuXG4gICAgICByZXR1cm4gKFxuICAgICAgICA8ZGl2IGNsYXNzPSdTbGlkZXItbmF2Jz5cbiAgICAgICAgICB7bmF2fVxuICAgICAgICA8L2Rpdj5cbiAgICAgIClcbiAgICB9XG4gIH0sXG4gIHJlbmRlcihoKSB7XG4gICAgY29uc3QgY2hpbGRyZW4gPSB0aGlzLiRzbG90cy5kZWZhdWx0XG5cbiAgICBjb25zdCB7XG4gICAgICBzaG93QXJyb3dzLFxuICAgICAgc2hvd05hdlxuICAgIH0gPSB0aGlzLiRwcm9wc1xuXG4gICAgY29uc3Qge1xuICAgICAgaW5kZXgsXG4gICAgICB0cmFuc2l0aW9uLFxuICAgICAgbW91c2VEb3duXG4gICAgfSA9IHRoaXNcblxuICAgIGNvbnN0IHNsaWRlc1N0eWxlcyA9IHtcbiAgICAgIHdpZHRoOiBgJHsxMDAgKiBjaGlsZHJlbi5sZW5ndGh9JWAsXG4gICAgICB0cmFuc2Zvcm06IGB0cmFuc2xhdGVYKCR7LTEgKiBpbmRleCAqICgxMDAgLyBjaGlsZHJlbi5sZW5ndGgpfSUpYCxcbiAgICB9XG4gICAgY29uc3Qgc2xpZGVzQ2xhc3NlcyA9IHRyYW5zaXRpb24gPyAnU2xpZGVyLXNsaWRlcyBTbGlkZXItc2xpZGVzLS10cmFuc2l0aW9uJyA6ICdTbGlkZXItc2xpZGVzJ1xuXG4gICAgcmV0dXJuIChcbiAgICAgIDxkaXYgY2xhc3M9XCJTbGlkZXJcIiByZWY9XCJzbGlkZXJcIj5cbiAgICAgICAge3Nob3dBcnJvd3MgPyB0aGlzLnJlbmRlckFycm93cyhoKSA6IG51bGx9XG4gICAgICAgIHtzaG93TmF2ID8gdGhpcy5yZW5kZXJOYXYoaCkgOiBudWxsfVxuICAgICAgICA8ZGl2XG4gICAgICAgICAgY2xhc3M9XCJTbGlkZXItaW5uZXJcIlxuICAgICAgICAgIG9uVG91Y2hzdGFydD17KGUpID0+IHRoaXMuaGFuZGxlRHJhZ1N0YXJ0KGUsIHRydWUpfVxuICAgICAgICAgIG9uVG91Y2htb3ZlPXsoZSkgPT4gdGhpcy5oYW5kbGVEcmFnTW92ZShlLCB0cnVlKX1cbiAgICAgICAgICBvblRvdWNoZW5kPXsoKSA9PiB0aGlzLmhhbmRsZURyYWdFbmQoKX1cbiAgICAgICAgICBvbk1vdXNlZG93bj17KGUpID0+IHRoaXMuaGFuZGxlRHJhZ1N0YXJ0KGUsIGZhbHNlKX1cbiAgICAgICAgICBvbk1vdXNlbW92ZT17KGUpID0+IG1vdXNlRG93biA/IHRoaXMuaGFuZGxlRHJhZ01vdmUoZSwgZmFsc2UpIDogbnVsbH1cbiAgICAgICAgICBvbk1vdXNldXA9eyhlKSA9PiB0aGlzLmhhbmRsZURyYWdFbmQoKX1cbiAgICAgICAgICBvbk1vdXNlb3V0PXsoZSkgPT4gdGhpcy5oYW5kbGVEcmFnRW5kKCl9PlxuICAgICAgICAgIDxkaXYgY2xhc3M9e3NsaWRlc0NsYXNzZXN9IHN0eWxlPXtzbGlkZXNTdHlsZXN9PlxuICAgICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIClcbiAgfVxufVxuIl19\n\n/***/ }),\n/* 1 */\n/***/ (function(module, exports) {\n\n// removed by extract-text-webpack-plugin\n\n/***/ }),\n/* 2 */\n/***/ (function(module, exports, __webpack_require__) {\n\nmodule.exports = __webpack_require__(0);\n\n\n/***/ })\n/******/ ]);\n});\n\n\n// WEBPACK FOOTER //\n// Slider.js"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// identity function for calling harmony imports with the correct context\n \t__webpack_require__.i = function(value) { return value; };\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 2);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap ad98e8e54ea921a7a660","import './Slider.css'\n\nexport default {\n  props: {\n    loop: {\n      type: Boolean,\n      default: false\n    },\n    selected: {\n      type: Number,\n      default: 0\n    },\n    showArrows: {\n      type: Boolean,\n      default: true\n    },\n    showNav: {\n      type: Boolean,\n      default: true\n    }\n  },\n  data: function () {\n    return {\n      dragStart: 0,\n      dragStartTime: new Date(),\n      transition: false,\n      index: this.$props.selected || 0,\n      lastIndex: this.$props.selected || 0,\n      mouseDown: false\n    }\n  },\n  methods: {\n    goToSlide: function (index, event) {\n      const children = this.$slots.default\n      const {\n        loop,\n      } = this.$props\n\n      if (event) {\n        event.preventDefault()\n        event.stopPropagation()\n      }\n\n      if (index < 0) {\n        index = loop ? children.length - 1 : 0\n      } else if (index >= children.length) {\n        index = loop ? 0 : children.length - 1\n      }\n\n      this.index = index\n      this.lastIndex = index\n      this.transition = true\n    },\n    getDragX: function (event, isTouch) {\n      return isTouch ?\n        event.touches[0].pageX :\n        event.pageX\n    },\n    handleDragStart: function (event, isTouch) {\n      const x = this.getDragX(event, isTouch)\n\n      this.dragStart = x\n      this.dragStartTime = new Date()\n      this.transition = false\n      this.slideWidth = this.$refs.slider.offsetWidth\n      this.mouseDown = true\n    },\n\n    handleDragMove: function (event, isTouch) {\n      const {\n        dragStart,\n        lastIndex,\n        slideWidth\n      } = this\n\n      const x = this.getDragX(event, isTouch)\n      const offset = dragStart - x\n      const percentageOffset = offset / slideWidth\n      const newIndex = lastIndex + percentageOffset\n      const SCROLL_OFFSET_TO_STOP_SCROLL = 30\n\n      // Stop scrolling if you slide more than 30 pixels\n      if (Math.abs(offset) > SCROLL_OFFSET_TO_STOP_SCROLL) {\n        event.stopPropagation()\n      }\n\n      this.index = newIndex\n    },\n    handleDragEnd: function () {\n      const children = this.$slots.default\n      const {\n        dragStartTime,\n        index,\n        lastIndex\n      } = this\n\n      const timeElapsed = new Date().getTime() - dragStartTime.getTime()\n      const offset = lastIndex - index\n      const velocity = Math.round(offset / timeElapsed * 10000)\n\n      let newIndex = Math.round(index)\n\n      if (Math.abs(velocity) > 5) {\n        newIndex = velocity < 0 ? lastIndex + 1 : lastIndex - 1\n      }\n\n      if (newIndex < 0) {\n        newIndex = 0\n      } else if (newIndex >= children.length) {\n        newIndex = children.length - 1\n      }\n\n      this.dragStart = 0\n      this.index = newIndex\n      this.lastIndex = newIndex\n      this.transition = true\n      this.mouseDown = false\n    },\n    renderArrows: function (h) {\n      const children = this.$slots.default\n\n      const {\n        loop,\n        showNav,\n      } = this.$props\n\n      const {\n        lastIndex\n      } = this\n\n      const arrowsClasses = showNav ? 'Slider-arrows' : 'Slider-arrows Slider-arrows--noNav'\n\n      const leftArrowEl = h(\n        'button', {\n          class: 'Slider-arrow Slider-arrow--left',\n          on: {\n            click: (e) => this.goToSlide(lastIndex - 1, e)\n          }\n        }\n      )\n\n      const rightArrowEl = h(\n        'button', {\n          class: 'Slider-arrow Slider-arrow--right',\n          on: {\n            click: (e) => this.goToSlide(lastIndex + 1, e)\n          }\n        }\n      )\n\n      return (\n        <div class={arrowsClasses}>\n          {loop || lastIndex > 0 ? leftArrowEl : null}\n          {loop || lastIndex < children.length - 1 ? rightArrowEl : null}\n        </div>\n      )\n    },\n    renderNav: function (h) {\n      const children = this.$slots.default\n      const {\n        lastIndex\n      } = this\n\n      const nav = children.map((slide, i) => {\n        const buttonClasses = i === lastIndex ? 'Slider-navButton Slider-navButton--active' : 'Slider-navButton'\n\n        return (\n          <button class={buttonClasses} key={i} onClick={(e) => this.goToSlide(i, e)}>\n          </button>\n        )\n      })\n\n      return (\n        <div class='Slider-nav'>\n          {nav}\n        </div>\n      )\n    }\n  },\n  render(h) {\n    const children = this.$slots.default\n\n    const {\n      showArrows,\n      showNav\n    } = this.$props\n\n    const {\n      index,\n      transition,\n      mouseDown\n    } = this\n\n    const slidesStyles = {\n      width: `${100 * children.length}%`,\n      transform: `translateX(${-1 * index * (100 / children.length)}%)`,\n    }\n    const slidesClasses = transition ? 'Slider-slides Slider-slides--transition' : 'Slider-slides'\n\n    return (\n      <div class=\"Slider\" ref=\"slider\">\n        {showArrows ? this.renderArrows(h) : null}\n        {showNav ? this.renderNav(h) : null}\n        <div\n          class=\"Slider-inner\"\n          onTouchstart={(e) => this.handleDragStart(e, true)}\n          onTouchmove={(e) => this.handleDragMove(e, true)}\n          onTouchend={() => this.handleDragEnd()}\n          onMousedown={(e) => this.handleDragStart(e, false)}\n          onMousemove={(e) => mouseDown ? this.handleDragMove(e, false) : null}\n          onMouseup={(e) => this.handleDragEnd()}\n          onMouseout={(e) => this.handleDragEnd()}>\n          <div class={slidesClasses} style={slidesStyles}>\n            {children}\n          </div>\n        </div>\n      </div>\n    )\n  }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./Slider.js"],"sourceRoot":""}


--------------------------------------------------------------------------------
/example/README.md:
--------------------------------------------------------------------------------
 1 | # Vue Simple Slider Example
 2 | 
 3 | > vue-simple-slider example
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | npm i -g vue-cli
10 | npm install
11 | 
12 | # serve with hot reload at localhost:4000
13 | npm start
14 | ```


--------------------------------------------------------------------------------
/example/example.js:
--------------------------------------------------------------------------------
 1 | import 'node_modules/vue-simple-slider/dist/Slider.css'
 2 | import Slider from 'vue-simple-slider'
 3 | 
 4 | const style = {
 5 |   height: '250px',
 6 |   display: 'flex',
 7 |   justifyContent: 'center',
 8 |   alignItems: 'center',
 9 |   color: '#fafafa'
10 | }
11 | 
12 | export default {
13 |   components: {
14 |     Slider
15 |   },
16 |   render(h) {
17 |     return (
18 |       <Slider>
19 |         <div style={{ background: '#21BB9A', ...style }}>
20 |           <h1>A</h1>
21 |         </div>
22 |         <div style={{ background: '#329ADD', ...style }}>
23 |           <h1>B</h1>
24 |         </div>
25 |         <div style={{ background: '#9A5CB9', ...style }}>
26 |           <h1>C</h1>
27 |         </div>
28 |         <div style={{ background: '#E64C3C', ...style }}>
29 |           <h1>D</h1>
30 |         </div>
31 |         <div style={{ background: '#2D3F52', ...style }}>
32 |           <h1>E</h1>
33 |         </div>
34 |       </Slider>
35 |     )
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/example/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app" class="container">
 3 |     <h1>Vue Simple Slider</h1>
 4 |     <p>
 5 |       Vue slider component with touch and mouse support. <br>
 6 |       Modern browsers and IE10+ (IE9 should work, but as flex is not supported you'll need to change CSS).
 7 |     </p>
 8 |     <p>
 9 |       <a href="https://github.com/piyushchauhan2011/vue-simple-slider">Download on GitHub</a>
10 |     </p>
11 |     <h2>Slider with default options</h2>
12 |     <ul>
13 |       <li><code>loop: false</code> - Should arrow navigation loop around</li>
14 |       <li><code>selected: 0</code> - Slide to be selected</li>
15 |       <li><code>showArrows: true</code> - Show arrows navigation</li>
16 |       <li><code>showNav: true</code> - Show pager navigation</li>
17 |     </ul>
18 |     <example></example>
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 | import example from './example'
24 | 
25 | export default {
26 |   name: 'app',
27 |   components: {
28 |     example
29 |   }
30 | }
31 | </script>
32 | 
33 | <style>
34 | @import "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css";
35 | 
36 | #app {
37 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
38 |   -webkit-font-smoothing: antialiased;
39 |   -moz-osx-font-smoothing: grayscale;
40 |   color: #2c3e50;
41 |   margin-top: 20px;
42 | }
43 | </style>
44 | 


--------------------------------------------------------------------------------
/example/package-lock.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example",
 3 |   "version": "1.0.0",
 4 |   "lockfileVersion": 1,
 5 |   "dependencies": {
 6 |     "vue-simple-slider": {
 7 |       "version": "1.0.1",
 8 |       "resolved": "https://registry.npmjs.org/vue-simple-slider/-/vue-simple-slider-1.0.1.tgz",
 9 |       "integrity": "sha512-ZLh1qYSxTS76dVAXhrwOsrFtVAlIXX56pi/0YDeV3xS4Sr/GSjk2P29y4+MBboWyE/OdYoH4GA+NeS8sxB8CaQ=="
10 |     }
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example",
 3 |   "version": "1.0.0",
 4 |   "license": "MIT",
 5 |   "scripts": {
 6 |     "start": "vue build index.vue"
 7 |   },
 8 |   "dependencies": {
 9 |     "vue-simple-slider": "^1.0.2"
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/example/yarn.lock:
--------------------------------------------------------------------------------
1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2 | # yarn lockfile v1
3 | 
4 | 
5 | vue-simple-slider@^1.0.1:
6 |   version "1.0.1"
7 |   resolved "https://registry.yarnpkg.com/vue-simple-slider/-/vue-simple-slider-1.0.1.tgz#2b493aacf4c010efd307a4364630da6e083c31dd"
8 | 


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "vue-simple-slider",
3 |   "version": "1.0.1",
4 |   "lockfileVersion": 1
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-simple-slider",
 3 |   "description": "A simple, flexible slider for Vue.js",
 4 |   "version": "1.0.2",
 5 |   "author": "Piyush Chauhan <piyushchauhan2011@gmail.com>",
 6 |   "main": "dist/Slider.js",
 7 |   "license": "MIT",
 8 |   "private": false,
 9 |   "scripts": {
10 |     "dev": "vue build App.vue",
11 |     "build": "vue build Slider.js --prod --lib"
12 |   },
13 |   "repository": {
14 |     "type": "git",
15 |     "url": "https://github.com/piyushchauhan2011/vue-simple-slider"
16 |   },
17 |   "bugs": {
18 |     "url": "https://github.com/piyushchauhan2011/vue-simple-slider/issues"
19 |   },
20 |   "homepage": "https://github.com/piyushchauhan2011/vue-simple-slider",
21 |   "keywords": [
22 |     "vue",
23 |     "vuejs",
24 |     "ui",
25 |     "components",
26 |     "slider",
27 |     "carousel"
28 |   ],
29 |   "dependencies": {}
30 | }
31 | 


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