Merge pull request #41 from lukaszflorczak/develop

v0.3

Author: Łukasz Florczak

README.md

@@ -1,12 +1,16 @@
 # vue-agile
 
 > Carousel component for Vue.js inspired by [Slick](https://github.com/kenwheeler/slick/).<br>
-> More powerfull with each version, touch-friendly, written in Vue and Vanilla JS (without jQuery dependency).
+> More powerful with each version, touch-friendly, written in Vue and Vanilla JS (without jQuery dependency).
 
 **[Demo & examples](https://lukaszflorczak.github.io/vue-agile/)**
 
 🤝 Thanks to [Maciej Wach](https://github.com/wachu91) for inventing the name, testing and motivation.
 
+## Important – update to version >= `0.3`
+
+**In version `0.3.0`, I removed all styles that are responsible for the appearance of navigation elements** (like dots color and shape, arrows position, etc.). I think most people use their own styles and default styles are completely redundant. If you want to check out these defaults styles, you can find them [here](https://github.com/lukaszflorczak/vue-agile/blob/master/src/Agile.vue#L488).
+
 ## Installation
 
 ``` bash
@@ -56,11 +60,15 @@ Every first-level child of `<agile>` is a new slide.
 | autoplaySpeed | integer (ms) | `3000` | Autoplay interval in milliseconds | 
 | dots | boolean | `true` | Enable dot indicators/pagination |
 | fade | boolean | `false` | Enable fade effect |
-| infinite | boolen | `true` | Infinite loop sliding | 
+| infinite | boolean | `true` | Infinite loop sliding | 
+| mobileFirst | boolean | `true` | Enable mobile first calculation for responsive settings |
+| options | object | `null` | All settings as one object | 
 | pauseOnHover | boolean | `true` | Pause autoplay when a slide is hovered |
 | pauseOnDotsHover | boolean | `false` | Pause autoplay when a dot is hovered |
+| responsive | object | `null` | Object containing breakpoints and settings objects | 
 | speed | integer (ms) | `300` | Slide animation speed in milliseconds | 
 | timing | string | `ease` | Transition timing function <br> (`linear`/`ease`/`ease-in`/`ease-out`/`ease-in-out`) |
+| unagile | boolean | `false` | Disable agile carousel | 
 
 ### Example
 
@@ -70,6 +78,46 @@ Every first-level child of `<agile>` is a new slide.
 </agile>
 ```
 
+## Responsive
+
+To customize responsiveness, I recommend defining desired breakpoint and passing a settings object with the options to modify inside **options**.
+
+### Example
+
+``` vue
+<agile :options="options">
+    ...
+</agile>
+```
+
+``` js
+data () {
+    return {
+        options: {
+            arrows: false,
+            
+            responsive: [
+                {
+                    breakpoint: 600,
+                    settings: {
+                        dots: false
+                    }
+                },
+                
+                {
+                    breakpoint: 900,
+                    settings: {
+                        arrows: true,
+                        dots: true,
+                        infinite: false
+                    }
+                }
+            ]
+        }
+    }
+}
+```
+
 ## Arrows
 
 By default carousel contains SVG arrows. You can change them using CSS or `prevArrow` & `nextArrow` parameters. 

demo/App.vue

@@ -4,7 +4,7 @@
             <div class="container">
                 <div class="row">
                     <div class="col-xs-12">
-                        <h1 class="section__title">Demo of <strong>vue-agile</strong><span class="badge">0.2</span></h1>
+                        <h1 class="section__title">Demo of <strong>vue-agile</strong><span class="badge">0.3</span></h1>
                         <p class="section__description">vue-agile is a carousel component for Vue.js inspired by Slick. Simple, touch-friendly, written in Vue and Vanilla JS (without jQuery dependency).</p>
 
                         <div class="gh-buttons visible-md">
@@ -39,7 +39,7 @@
 
                 <div class="row">
                     <div class="col-xs-12">
-                        <agile>
+                        <agile :options="options">
                             <div class="slide slide--1"><h3>slide 1</h3></div>
                             <div class="slide slide--2"><h3>slide 2</h3></div>
                             <div class="slide slide--3"><h3>slide 3</h3></div>
@@ -191,7 +191,7 @@
                                         &:hover {
                                             background-color: rgba(#000, .5);
 
-                                            #arrow-svg {
+                                            svg {
                                                 fill: #fff;
                                             }
                                         }
@@ -200,7 +200,7 @@
                                             display: none;
                                         }
 
-                                        #arrow-svg {
+                                        svg {
                                             fill: rgba(#fff, .4);
                                             height: 25px;
                                         }

demo/scss/main.scss

@@ -36,6 +36,128 @@ h1, h2, h3 {
     font-weight: 300;
 }
 
+.agile {
+    position: relative;
+
+    &, * {
+        &:focus,
+        &:active {
+            outline: none;
+        }
+    }
+
+    &__list {
+        display: block;
+        margin: 0;
+        overflow: hidden;
+        padding: 0;
+        position: relative;
+        width: 100%;
+    }
+
+    &__track {
+        align-items: center;
+        display: flex;
+        justify-content: flex-start;
+
+        .agile--disabled & {
+            display: block;
+            max-width: 100%;
+        }
+    }
+
+    &__slide {
+        display: block;
+
+        .agile--fade & {
+            opacity: 0;
+            position: relative;
+            z-index: 0;
+
+            &--active {
+                opacity: 1;
+                z-index: 2;
+            }
+
+            &--expiring {
+                opacity: 1;
+                transition-duration: 0s;
+                z-index: 1;
+            }
+        }
+    }
+
+    &__arrow {
+        border: none;
+        bottom: -11px;
+        margin: 0;
+        padding: 0;
+        position: absolute;
+        transition-duration: .3s;
+
+        &[disabled] {
+            cursor: default;
+            opacity: .4;
+        }
+
+        &:hover {
+            svg {
+                fill: #333;
+            }
+        }
+
+        &--prev {
+            left: 0;
+        }
+
+        &--next {
+            right: 0;
+        }
+
+        svg {
+            fill: #888;
+            height: 24px;
+            transition-duration: .3s;
+        }
+    }
+
+    &__dots {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        list-style: none;
+        margin: 20px 0;
+        padding: 0;
+        text-align: center;
+        white-space: nowrap;
+    }
+
+    &__dot {
+        margin: 0 10px;
+
+        button {
+            background-color: #eee;
+            border: none;
+            border-radius: 50%;
+            cursor: pointer;
+            display: block;
+            height: 10px;
+            font-size: 0;
+            line-height: 0;
+            margin: 0;
+            transition-duration: .3s;
+            width: 10px;
+        }
+
+        &--current,
+        &:hover {
+            button {
+                background-color: #888;
+            }
+        }
+    }
+}
+
 .hidden-md {
     @include md {
         display: none;