├── .gitignore
├── LICENSE
├── README.md
├── package.json
├── src
    ├── Item.vue
    ├── Lory.vue
    ├── Next.vue
    ├── Prev.vue
    └── index.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | npm-debug.log
3 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) Fangdun Cai <cfddream@gmail.com> (fundon.me)
 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
13 | all 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
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # lory
 2 | 
 3 | ☀ Touch enabled minimalistic slider for Vue, it is based on [lory](https://github.com/meandmax/lory).
 4 | 
 5 | 
 6 | ## Installation
 7 | 
 8 | ```console
 9 | $ npm install vue-lory --save
10 | ```
11 | 
12 | 
13 | ## Examples
14 | 
15 | ```vue
16 | <template>
17 |   <lory :options="{ enableMouseEvents: true, infinite: 1 }">
18 |     <item>1</item>
19 |     <item>2</item>
20 |     <item>3</item>
21 |     <item>4</item>
22 |     <item>5</item>
23 |     <item>6</item>
24 |     <prev slot="actions"></prev>
25 |     <next slot="actions"></next>
26 |   </lory>
27 | </template>
28 | 
29 | <script>
30 | import { Lory, Item, Prev, Next } from 'vue-lory'
31 | 
32 | export default {
33 |   components: {
34 |     Lory,
35 |     Item,
36 |     Prev,
37 |     Next
38 |   }
39 | }
40 | </script>
41 | ```
42 | 
43 | 
44 | ## Badges
45 | 
46 | ![](https://img.shields.io/badge/license-MIT-blue.svg)
47 | ![](https://img.shields.io/badge/status-stable-green.svg)
48 | 
49 | ---
50 | 
51 | > [fundon.me](https://fundon.me) &nbsp;&middot;&nbsp;
52 | > GitHub [@fundon](https://github.com/fundon) &nbsp;&middot;&nbsp;
53 | > Twitter [@_fundon](https://twitter.com/_fundon)
54 | 
55 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-lory",
 3 |   "version": "0.0.5",
 4 |   "description": "Vue Slider Component is based on lory",
 5 |   "repository": "vue-bulma/lory",
 6 |   "license": "MIT",
 7 |   "author": {
 8 |     "name": "Fangdun Cai",
 9 |     "email": "cfddream@gmail.com",
10 |     "url": "fundon.me"
11 |   },
12 |   "keywords": [
13 |     "vue",
14 |     "slider",
15 |     "vue-lory",
16 |     "lory"
17 |   ],
18 |   "main": "src/index.js",
19 |   "peerDependencies": {
20 |     "vue": ">=2"
21 |   },
22 |   "dependencies": {
23 |     "lory.js": "^2.2.1"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/src/Item.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <li class="js_slide">
3 |     <slot></slot>
4 |   </li>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/Lory.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="slider js_slider">
  3 |     <div class="frame js_frame">
  4 |       <ul class="slides js_slides">
  5 |         <slot></slot>
  6 |       </ul>
  7 |     </div>
  8 |     <slot name="actions"></slot>
  9 |   </div>
 10 | </template>
 11 | 
 12 | <script>
 13 | import { lory } from 'lory.js'
 14 | 
 15 | export default {
 16 | 
 17 |   props: {
 18 |     options: {
 19 |       type: Object,
 20 |       default: () => ({})
 21 |     }
 22 |   },
 23 | 
 24 |   data () {
 25 |     return {
 26 |       slider: null
 27 |     }
 28 |   },
 29 | 
 30 |   mounted () {
 31 |     this.slider = lory(this.$el, this.options)
 32 |   },
 33 | 
 34 |   beforeDestroy () {
 35 |     this.slider.destroy()
 36 |   }
 37 | 
 38 | }
 39 | </script>
 40 | 
 41 | <style lang="scss">
 42 | /**
 43 |  * (optional) define here the style definitions which should be applied on the slider container
 44 |  * e.g. width including further controls like arrows etc.
 45 |  */
 46 | .slider {
 47 | 
 48 |   .frame {
 49 |     /**
 50 |      * (optional) wrapper width, specifies width of the slider frame.
 51 |      */
 52 |     width: 100%;
 53 | 
 54 |     position: relative;
 55 |     font-size: 0;
 56 |     line-height: 0;
 57 |     overflow: hidden;
 58 |     white-space: nowrap;
 59 |   }
 60 | 
 61 |   .slides {
 62 |     width: 100%;
 63 |     display: inline-block;
 64 |   }
 65 | 
 66 |   li {
 67 |     position: relative;
 68 |     display: inline-block;
 69 | 
 70 |     /**
 71 |      * (optional) if the content inside the slide element has a defined size.
 72 |      */
 73 |     width: 100%;
 74 | 
 75 |     position: relative;
 76 |     display: inline-block;
 77 |     text-align: center;
 78 |     font-size: 15px;
 79 |     line-height: 30px;
 80 |   }
 81 | 
 82 |   .prev, .next {
 83 |     position: absolute;
 84 |     top: 50%;
 85 |     margin-top: -25px;
 86 |     display: block;
 87 |     cursor: pointer;
 88 |   }
 89 | 
 90 |   .next {
 91 |     right: 0;
 92 |   }
 93 | 
 94 |   .prev {
 95 |     left: 0;
 96 |   }
 97 | 
 98 |   .next svg, .prev svg {
 99 |     width: 25px;
100 |   }
101 | 
102 |   &.js_rewind {
103 |     .frame li {
104 |       margin-right: 10px;
105 |     }
106 |   }
107 | }
108 | </style>
109 | 


--------------------------------------------------------------------------------
/src/Next.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <span class="js_next next">
 3 |     <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 0 501.5 501.5"><g><path :fill="color" d="M199.33 410.622l-55.77-55.508L247.425 250.75 143.56 146.384l55.77-55.507L358.44 250.75z"></path></g></svg>
 4 |   </span>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   props: {
10 |     size: {
11 |       type: Number,
12 |       default: 50
13 |     },
14 |     color: {
15 |       type: String,
16 |       default: '#2E435A'
17 |     }
18 |   }
19 | }
20 | </script>
21 | 


--------------------------------------------------------------------------------
/src/Prev.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <span class="js_prev prev">
 3 |     <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 0 501.5 501.5"><g><path :fill="color" d="M302.67 90.877l55.77 55.508L254.575 250.75 358.44 355.116l-55.77 55.506L143.56 250.75z"></path></g></svg>
 4 |   </span>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   props: {
10 |     size: {
11 |       type: Number,
12 |       default: 50
13 |     },
14 |     color: {
15 |       type: String,
16 |       default: '#2E435A'
17 |     }
18 |   }
19 | }
20 | </script>
21 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | exports.Item = require('./Item').default
2 | exports.Lory = require('./Lory').default
3 | exports.Prev = require('./Prev').default
4 | exports.Next = require('./Next').default
5 | 


--------------------------------------------------------------------------------
/yarn.lock:
--------------------------------------------------------------------------------
1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2 | # yarn lockfile v1
3 | lory.js:
4 |   version "2.2.1"
5 |   resolved "https://registry.yarnpkg.com/lory.js/-/lory.js-2.2.1.tgz#e45ff82f1e403ee9df5e9c01b31636a09f45a743"
6 | 
7 | 


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