├── Carousel.vue
├── LICENSE
├── README.md
├── carousel.css
├── carousel.js
├── component.html
├── images
    ├── p1.jpeg
    ├── p2.jpeg
    ├── p3.jpeg
    ├── p4.jpeg
    ├── puff.svg
    └── thumbs
    │   ├── p1.jpeg
    │   ├── p2.jpeg
    │   ├── p3.jpeg
    │   └── p4.jpeg
└── index.html


/Carousel.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="card-carousel" @mouseover="stopTimer" @mouseleave="restartTimer">
  3 |         <div class="progressbar" v-if="autoSlideInterval && showProgressBar">
  4 |             <div :style="{width: progressBar + '%' }"></div>
  5 |         </div>
  6 |         <div class="card-img">
  7 |             <img :src="currentImage" alt="">
  8 |             <div class="actions">
  9 |                 <span @click="prevImage" class="prev">
 10 |                     &#8249;
 11 |                 </span>
 12 |                 <span @click="nextImage" class="next">
 13 |                     &#8250;
 14 |                 </span>
 15 |             </div>
 16 |         </div>
 17 |         <div class="thumbnails">
 18 |             <div 
 19 |                 v-for="(image, index) in  images"
 20 |                 :key="image.id"
 21 |                 :class="['thumbnail-image', (activeImage == index) ? 'active' : '']"
 22 |                 @click="activateImage(index)"
 23 |             >
 24 |                 <img :src="image.thumb">
 25 |             </div>
 26 |         </div>
 27 |     </div>
 28 | </template>
 29 | 
 30 | <script>
 31 | export default {
 32 |     name: 'Carousel',
 33 |     data() {
 34 |         return {
 35 |             //Index of the active image
 36 |             activeImage: 0,
 37 |             //Hold the timeout, so we can clear it when it is needed
 38 |             autoSlideTimeout: null,
 39 |             //If the timer is stopped e.g. when hovering over the carousel
 40 |             stopSlider: false,
 41 |             //Hold the time left until changing to the next image
 42 |             timeLeft: 0,
 43 |             //Hold the interval so we can clear it when needed
 44 |             timerInterval: null,
 45 |             //Every 10ms decrease the timeLeft
 46 |             countdownInterval: 10
 47 |         }
 48 |     },
 49 |     computed: {
 50 |         // currentImage gets called whenever activeImage changes
 51 |         // and is the reason why we don't have to worry about the 
 52 |         // big image getting updated
 53 |         currentImage() {
 54 |             this.timeLeft = this.autoSlideInterval;
 55 |             return this.images[this.activeImage].big;
 56 |         },
 57 |         progressBar() {
 58 |             //Calculate the width of the progressbar
 59 |             return 100 - (this.timeLeft/this.autoSlideInterval) * 100;
 60 |         }
 61 |     },
 62 |     methods: {
 63 |         // Go forward on the images array 
 64 |         // or go at the first image if you can't go forward
 65 |         nextImage() {
 66 |             var active = this.activeImage + 1;
 67 |             if(active >= this.images.length) {
 68 |                 active = 0;
 69 |             }
 70 |             this.activateImage(active);
 71 |         },
 72 |         // Go backwards on the images array 
 73 |         // or go at the last image
 74 |         prevImage() {
 75 |             var active = this.activeImage - 1;
 76 |             if(active < 0) {
 77 |                 active = this.images.length - 1;
 78 |             }
 79 |             this.activateImage(active);            
 80 |         },
 81 |         activateImage(imageIndex) {
 82 |             this.activeImage = imageIndex;
 83 |         },
 84 |         //Wait until 'interval' and go to the next image;
 85 |         startTimer(interval) {
 86 |             if(interval && interval > 0 && !this.stopSlider) {
 87 |                 var self = this;
 88 |                 clearTimeout(this.autoSlideTimeout);
 89 |                 this.autoSlideTimeout = setTimeout(function() {
 90 |                     self.nextImage();
 91 |                     self.startTimer(self.autoSlideInterval);
 92 |                 }, interval);
 93 |             }
 94 |         },
 95 |         //Stop the timer when hovering over the carousel
 96 |         stopTimer() {
 97 |             clearTimeout(this.autoSlideTimeout);
 98 |             this.stopSlider = true;
 99 |             clearInterval(this.timerInterval);
100 |         },
101 |         //Restart the timer(with 'timeLeft') when leaving from the carousel
102 |         restartTimer() {
103 |             this.stopSlider = false;
104 |             clearInterval(this.timerInterval);
105 |             this.startCountdown();
106 |             this.startTimer(this.timeLeft);
107 |         },
108 |         //Start countdown from 'autoSlideInterval' to 0
109 |         startCountdown() {
110 |             if(!this.showProgressBar) return;
111 |             var self = this;
112 |             this.timerInterval = setInterval(function() {
113 |                 self.timeLeft -= self.countdownInterval;
114 |                 if(self.timeLeft <= 0) {
115 |                     self.timeLeft = self.autoSlideInterval;
116 |                 }
117 |             }, this.countdownInterval);
118 |         }
119 |     },
120 |     created() {
121 |         //Check if startingImage prop was given and if the index is inside the images array bounds
122 |         if(this.startingImage 
123 |             && this.startingImage >= 0
124 |             && this.startingImage < this.images.length) {
125 |             this.activeImage = this.startingImage;
126 |         }
127 | 
128 |         //Check if autoSlideInterval prop was given and if it is a positive number
129 |         if(this.autoSlideInterval
130 |             && this.autoSlideInterval > this.countdownInterval) {
131 |             //Start the timer to go to the next image
132 |             this.startTimer(this.autoSlideInterval);
133 |             this.timeLeft = this.autoSlideInterval;
134 |             //Start countdown to show the progressbar
135 |             this.startCountdown();
136 |         }
137 |     },
138 |     props: ['startingImage', 'images', 'autoSlideInterval', 'showProgressBar']
139 | }
140 | </script>
141 | 
142 | 
143 | <style scoped>
144 | .card-carousel {
145 |     user-select: none;
146 |     position: relative;
147 | }
148 | 
149 | .progressbar {
150 |     display: block;
151 |     width: 100%;
152 |     height: 5px;
153 |     position: absolute;
154 |     background-color: rgba(221, 221, 221, 0.25);
155 |     z-index: 1;
156 | }
157 | 
158 | .progressbar > div {
159 |     background-color: rgba(255, 255, 255, 0.52);
160 |     height: 100%;
161 | }
162 | 
163 | .thumbnails {
164 |     display: flex;
165 |     justify-content: space-evenly;
166 |     flex-direction: row;
167 | }
168 | 
169 | .thumbnail-image {
170 |     display: flex;
171 |     align-items: center;
172 |     cursor: pointer;
173 |     padding: 2px;
174 | }
175 | 
176 | .thumbnail-image > img {
177 |     width: 100%;
178 |     height: auto;
179 |     transition: all 250ms;
180 | }
181 | 
182 | .thumbnail-image:hover > img, 
183 | .thumbnail-image.active > img {
184 |     opacity: 0.6;
185 |     box-shadow: 2px 2px 6px 1px rgba(0,0,0, 0.5);
186 | }
187 | 
188 | .card-img {
189 |     position: relative;
190 |     margin-bottom: 15px;
191 | }
192 | 
193 | .card-img > img {
194 |     display: block;
195 |     margin: 0 auto;
196 | }
197 | 
198 | .actions {
199 |     font-size: 1.5em;
200 |     height: 40px;
201 |     position: absolute;
202 |     top: 50%;
203 |     margin-top: -20px;
204 |     width: 100%;
205 |     display: flex;
206 |     align-items: center;
207 |     justify-content: space-between;
208 |     color: #585858;
209 | }
210 | 
211 | .actions > span {
212 |     cursor: pointer;
213 |     transition: all 250ms;
214 |     font-size: 45px;
215 | }
216 | 
217 | .actions > span.prev {
218 |     margin-left: 5px;
219 | }
220 | 
221 | .actions > span.next {
222 |     margin-right: 5px;
223 | }
224 | 
225 | .actions > span:hover {
226 |     color: #eee;
227 | }
228 | </style>
229 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | This is free and unencumbered software released into the public domain.
 2 | 
 3 | Anyone is free to copy, modify, publish, use, compile, sell, or
 4 | distribute this software, either in source code form or as a compiled
 5 | binary, for any purpose, commercial or non-commercial, and by any
 6 | means.
 7 | 
 8 | In jurisdictions that recognize copyright laws, the author or authors
 9 | of this software dedicate any and all copyright interest in the
10 | software to the public domain. We make this dedication for the benefit
11 | of the public at large and to the detriment of our heirs and
12 | successors. We intend this dedication to be an overt act of
13 | relinquishment in perpetuity of all present and future rights to this
14 | software under copyright law.
15 | 
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
22 | OTHER DEALINGS IN THE SOFTWARE.
23 | 
24 | For more information, please refer to <http://unlicense.org>
25 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue carousel
 2 | ## Simple vue component that outputs an infinite carousel
 3 | ### built with [Vue.js](https://vuejs.org/ "Vue's Homepage") and [Bulma](https://bulma.io/ "Bulma's Homepage")
 4 | # Preview
 5 | ## Simple
 6 | ![vue carousel](https://i.imgur.com/SPB4hcL.gif "Vue carousel in action")
 7 | ## With auto sliding and progressbar
 8 | ![vue carousel auto slide](https://i.imgur.com/shuNL8Z.gif "Vue carousel with auto slide")
 9 | # Props
10 | 1. **images** (required): Accepts array of objects.
11 | 2. **starting-image** (optional) [DEFAULT: 0]: Accepts the index of the image that the carousel starts from 
12 | 3. **auto-slide-interval** (optional): time in milliseconds to auto slide to the next image e.g. 1000, which is 1 second
13 | 4. **show-progress-bar** (optional) [DEFAULT: false]: boolean to show or hide the progressbar on top of the images. Needs to be used with **auto-slide-interval** prop.
14 | ```javascript 
15 |     //Example of images
16 |     let images = [
17 |         { 
18 |             id: '1',
19 |             big: 'path to full image',
20 |             thumb: 'path to thumbnail'
21 |         },
22 |         { 
23 |             id: '2',
24 |             big: 'path to full image',
25 |             thumb: 'path to thumbnail'
26 |         }
27 |     ]
28 | ```
29 | 
30 | ## Example usage
31 | ## Method 1
32 | You can see an example in both index.html and component.html
33 | ### Steps
34 | 1. include vue.js
35 | 2. include the carousel.js
36 | 3. create the images array
37 | 4. reference the carousel in your html 
38 | 
39 | ## Method 2
40 | Using the component with vue cli as a single file component
41 | 
42 | > This method does **not** use Bulma
43 | ### Note 
44 | To reference the Carousel with another name 
45 | - change the name of the file (Carousel.vue) to whatever you want e.g. **MyCarousel.vue**
46 | - change the `name` attribute inside the file to the previously given name e.g. **MyCarousel**
47 | ### Steps
48 | 1. Download Carousel.vue
49 | 2. Copy the file to your project
50 | 3. create the images array
51 | 4. ```javascript
52 |     // import the Carousel.vue 
53 |     import Carousel from 'path/to/Carousel.vue'
54 |     <script>
55 |         export default {
56 |             name: 'OtherComponent',
57 |             // Include the Carousel here
58 |             components: {
59 |                 Carousel
60 |             }
61 |             ...
62 |         }
63 |     </script>
64 |     ```
65 | 5. reference it in your template as shown in the examples below
66 | 
67 | ```html
68 | <!-- Example -->
69 | <carousel
70 |     :starting-image="2"
71 |     :images="images"
72 | ></carousel>
73 | ```
74 | ```html
75 | <!-- Example with auto slide-->
76 | <carousel
77 |     :starting-image="2"
78 |     :images="images"
79 |     :auto-slide-interval="1500"
80 | ></carousel>
81 | ```
82 | ```html
83 | <!-- Example with auto slide and progressbar on top of the images-->
84 | <carousel
85 |     :starting-image="2"
86 |     :images="images"
87 |     :auto-slide-interval="1500"
88 |     :show-progress-bar="true"
89 | ></carousel>
90 | ```
91 | 
92 | You can also find a post I've written explaining the process on [dev.to](https://dev.to/tsanak/building-an-image-carousel-with-vuejs--cjp "Vue carousel post")
93 | 
94 | ## :memo: Features
95 | If you want a new feature to be implemented you can create an issue with the label Feature.
96 | 
97 | ## Contributing
98 | Pull requests are more than welcome! :smiley:


--------------------------------------------------------------------------------
/carousel.css:
--------------------------------------------------------------------------------
 1 | .card-carousel {
 2 |     user-select: none;
 3 |     position: relative;
 4 | }
 5 | 
 6 | .progressbar {
 7 |     display: block;
 8 |     width: 100%;
 9 |     height: 5px;
10 |     position: absolute;
11 |     background-color: rgba(221, 221, 221, 0.25);
12 |     z-index: 1;
13 | }
14 | 
15 | .progressbar > div {
16 |     background-color: rgba(255, 255, 255, 0.52);
17 |     height: 100%;
18 | }
19 | 
20 | .thumbnails {
21 |     display: flex;
22 |     justify-content: space-evenly;
23 |     flex-direction: row;
24 | }
25 | 
26 | .thumbnail-image {
27 |     display: flex;
28 |     align-items: center;
29 |     cursor: pointer;
30 |     padding: 2px;
31 | }
32 | 
33 | .thumbnail-image > img {
34 |     width: 100%;
35 |     height: auto;
36 |     transition: all 250ms;
37 | }
38 | 
39 | .thumbnail-image:hover > img, 
40 | .thumbnail-image.active > img {
41 |     opacity: 0.6;
42 |     box-shadow: 2px 2px 6px 1px rgba(0,0,0, 0.5);
43 | }
44 | 
45 | .card-img {
46 |     position: relative;
47 |     margin-bottom: 15px;
48 | }
49 | 
50 | .card-img > img {
51 |     display: block;
52 |     margin: 0 auto;
53 | }
54 | 
55 | .actions {
56 |     font-size: 1.5em;
57 |     height: 40px;
58 |     position: absolute;
59 |     top: 50%;
60 |     margin-top: -20px;
61 |     width: 100%;
62 |     display: flex;
63 |     align-items: center;
64 |     justify-content: space-between;
65 |     color: #585858;
66 | }
67 | 
68 | .actions > span {
69 |     cursor: pointer;
70 |     transition: all 250ms;
71 | }
72 | 
73 | .actions > span.prev {
74 |     margin-left: 5px;
75 | }
76 | 
77 | .actions > span.next {
78 |     margin-right: 5px;
79 | }
80 | 
81 | .actions > span:hover {
82 |     color: #eee;
83 | }


--------------------------------------------------------------------------------
/carousel.js:
--------------------------------------------------------------------------------
  1 | Vue.component('carousel', {
  2 |     template: `
  3 |         <div class="card-carousel" @mouseover="stopTimer" @mouseleave="restartTimer">
  4 |             <div class="progressbar" v-if="autoSlideInterval && showProgressBar">
  5 |                 <div :style="{width: progressBar + '%' }"></div>
  6 |             </div>
  7 |             <div class="card-img">
  8 |                 <img :src="currentImage" alt="">
  9 |                 <div class="actions">
 10 |                     <span @click="prevImage" class="prev">
 11 |                         <i class="fas fa-chevron-left"></i>
 12 |                     </span>
 13 |                     <span @click="nextImage" class="next">
 14 |                         <i class="fas fa-chevron-right"></i>
 15 |                     </span>
 16 |                 </div>
 17 |             </div>
 18 |             <div class="thumbnails">
 19 |                 <div 
 20 |                     v-for="(image, index) in  images"
 21 |                     :key="image.id"
 22 |                     :class="['thumbnail-image', (activeImage == index) ? 'active' : '']"
 23 |                     @click="activateImage(index)"
 24 |                 >
 25 |                     <img :src="image.thumb">
 26 |                 </div>
 27 |             </div>
 28 |         </div>
 29 |     `,
 30 |     computed: {
 31 |         // currentImage gets called whenever activeImage changes
 32 |         // and is the reason why we don't have to worry about the 
 33 |         // big image getting updated
 34 |         currentImage() {
 35 |             this.timeLeft = this.autoSlideInterval;
 36 |             return this.images[this.activeImage].big;
 37 |         },
 38 |         progressBar() {
 39 |             //Calculate the width of the progressbar
 40 |             return 100 - (this.timeLeft/this.autoSlideInterval) * 100;
 41 |         }
 42 |     },
 43 |     data() {
 44 |         return {
 45 |             //Index of the active image
 46 |             activeImage: 0,
 47 |             //Hold the timeout, so we can clear it when it is needed
 48 |             autoSlideTimeout: null,
 49 |             //If the timer is stopped e.g. when hovering over the carousel
 50 |             stopSlider: false,
 51 |             //Hold the time left until changing to the next image
 52 |             timeLeft: 0,
 53 |             //Hold the interval so we can clear it when needed
 54 |             timerInterval: null,
 55 |             //Every 10ms decrease the timeLeft
 56 |             countdownInterval: 10
 57 |         }
 58 |     },
 59 |     methods: {
 60 |         // Go forward on the images array 
 61 |         // or go at the first image if you can't go forward
 62 |         nextImage() {
 63 |             var active = this.activeImage + 1;
 64 |             if(active >= this.images.length) {
 65 |                 active = 0;
 66 |             }
 67 |             this.activateImage(active);
 68 |         },
 69 |         // Go backwards on the images array 
 70 |         // or go at the last image
 71 |         prevImage() {
 72 |             var active = this.activeImage - 1;
 73 |             if(active < 0) {
 74 |                 active = this.images.length - 1;
 75 |             }
 76 |             this.activateImage(active);            
 77 |         },
 78 |         activateImage(imageIndex) {
 79 |             this.activeImage = imageIndex;
 80 |         },
 81 |         //Wait until 'interval' and go to the next image;
 82 |         startTimer(interval) {
 83 |             if(interval && interval > 0 && !this.stopSlider) {
 84 |                 var self = this;
 85 |                 clearTimeout(this.autoSlideTimeout);
 86 |                 this.autoSlideTimeout = setTimeout(function() {
 87 |                     self.nextImage();
 88 |                     self.startTimer(self.autoSlideInterval);
 89 |                 }, interval);
 90 |             }
 91 |         },
 92 |         //Stop the timer when hovering over the carousel
 93 |         stopTimer() {
 94 |             clearTimeout(this.autoSlideTimeout);
 95 |             this.stopSlider = true;
 96 |             clearInterval(this.timerInterval);
 97 |         },
 98 |         //Restart the timer(with 'timeLeft') when leaving from the carousel
 99 |         restartTimer() {
100 |             this.stopSlider = false;
101 |             clearInterval(this.timerInterval);
102 |             this.startCountdown();
103 |             this.startTimer(this.timeLeft);
104 |         },
105 |         //Start countdown from 'autoSlideInterval' to 0
106 |         startCountdown() {
107 |             if(!this.showProgressBar) return;
108 |             var self = this;
109 |             this.timerInterval = setInterval(function() {
110 |                 self.timeLeft -= self.countdownInterval;
111 |                 if(self.timeLeft <= 0) {
112 |                     self.timeLeft = self.autoSlideInterval;
113 |                 }
114 |             }, this.countdownInterval);
115 |         }
116 |     },
117 |     created() {
118 |         //Check if startingImage prop was given and if the index is inside the images array bounds
119 |         if(this.startingImage 
120 |             && this.startingImage >= 0
121 |             && this.startingImage < this.images.length) {
122 |             this.activeImage = this.startingImage;
123 |         }
124 | 
125 |         //Check if autoSlideInterval prop was given and if it is a positive number
126 |         if(this.autoSlideInterval
127 |             && this.autoSlideInterval > this.countdownInterval) {
128 |             //Start the timer to go to the next image
129 |             this.startTimer(this.autoSlideInterval);
130 |             this.timeLeft = this.autoSlideInterval;
131 |             //Start countdown to show the progressbar
132 |             this.startCountdown();
133 |         }
134 |     },
135 |     props: ['startingImage', 'images', 'autoSlideInterval', 'showProgressBar']
136 | })


--------------------------------------------------------------------------------
/component.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |     <title>Vue slider</title>
 8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
 9 |     <link rel="stylesheet" href="carousel.css">
10 | </head>
11 | <body>
12 |     <section class="section" id="app">
13 |         <div class="columns">
14 |             <div class="column is-4">
15 |                 <div class="card">
16 |                     <div class="card-content">
17 |                         <carousel
18 |                             :starting-image="2"
19 |                             :images="images"
20 |                             :auto-slide-interval="1500"
21 |                             :show-progress-bar="true"
22 |                         ></carousel>
23 |                         <p>They are taking</p>
24 |                     </div>
25 |                 </div>
26 |             </div>
27 |             <div class="column is-4">
28 |                 <div class="card">
29 |                     <div class="card-content">
30 |                         <carousel
31 |                             :starting-image="0"
32 |                             :images="images"
33 |                         ></carousel>
34 |                         <p>the hobbits</p>
35 |                     </div>
36 |                 </div>
37 |             </div>
38 |             <div class="column is-4">
39 |                 <div class="card">
40 |                     <div class="card-content">
41 |                         <carousel
42 |                             :starting-image="3"
43 |                             :images="images"                      
44 |                         ></carousel>
45 |                         <p>to Isengard</p>
46 |                     </div>
47 |                 </div>
48 |             </div>
49 |         </div>
50 |     </section>
51 |     <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
52 |     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
53 |     <script src="carousel.js"></script>
54 |     <script>
55 | 
56 |         var app = new Vue({
57 |             el: '#app',
58 |             data() {
59 |                 return {
60 |                     images: [
61 |                         {
62 |                             id: '1',
63 |                             big: 'images/p1.jpeg',
64 |                             thumb: 'images/thumbs/p1.jpeg'
65 |                         },
66 |                         {
67 |                             id: '2',
68 |                             big: 'images/p2.jpeg',
69 |                             thumb: 'images/thumbs/p2.jpeg'
70 |                         },
71 |                         {
72 |                             id: '3',
73 |                             big: 'images/p3.jpeg',
74 |                             thumb: 'images/thumbs/p3.jpeg'
75 |                         },
76 |                         {
77 |                             id: '4',
78 |                             big: 'images/p4.jpeg',
79 |                             thumb: 'images/thumbs/p4.jpeg'
80 |                         }
81 |                     ]
82 |                 }
83 |             }
84 |         });
85 |     </script>
86 | </body>
87 | </html>


--------------------------------------------------------------------------------
/images/p1.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tsanak/vue-carousel/93534d2b8245e1de1126fcadbc181f8f14860df5/images/p1.jpeg


--------------------------------------------------------------------------------
/images/p2.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tsanak/vue-carousel/93534d2b8245e1de1126fcadbc181f8f14860df5/images/p2.jpeg


--------------------------------------------------------------------------------
/images/p3.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tsanak/vue-carousel/93534d2b8245e1de1126fcadbc181f8f14860df5/images/p3.jpeg


--------------------------------------------------------------------------------
/images/p4.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tsanak/vue-carousel/93534d2b8245e1de1126fcadbc181f8f14860df5/images/p4.jpeg


--------------------------------------------------------------------------------
/images/puff.svg:
--------------------------------------------------------------------------------
 1 | <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
 2 | <svg width="44" height="44" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#2C3E50">
 3 |     <g fill="none" fill-rule="evenodd" stroke-width="2">
 4 |         <circle cx="22" cy="22" r="1">
 5 |             <animate attributeName="r"
 6 |                 begin="0s" dur="1.8s"
 7 |                 values="1; 20"
 8 |                 calcMode="spline"
 9 |                 keyTimes="0; 1"
10 |                 keySplines="0.165, 0.84, 0.44, 1"
11 |                 repeatCount="indefinite" />
12 |             <animate attributeName="stroke-opacity"
13 |                 begin="0s" dur="1.8s"
14 |                 values="1; 0"
15 |                 calcMode="spline"
16 |                 keyTimes="0; 1"
17 |                 keySplines="0.3, 0.61, 0.355, 1"
18 |                 repeatCount="indefinite" />
19 |         </circle>
20 |         <circle cx="22" cy="22" r="1">
21 |             <animate attributeName="r"
22 |                 begin="-0.9s" dur="1.8s"
23 |                 values="1; 20"
24 |                 calcMode="spline"
25 |                 keyTimes="0; 1"
26 |                 keySplines="0.165, 0.84, 0.44, 1"
27 |                 repeatCount="indefinite" />
28 |             <animate attributeName="stroke-opacity"
29 |                 begin="-0.9s" dur="1.8s"
30 |                 values="1; 0"
31 |                 calcMode="spline"
32 |                 keyTimes="0; 1"
33 |                 keySplines="0.3, 0.61, 0.355, 1"
34 |                 repeatCount="indefinite" />
35 |         </circle>
36 |     </g>
37 | </svg>


--------------------------------------------------------------------------------
/images/thumbs/p1.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tsanak/vue-carousel/93534d2b8245e1de1126fcadbc181f8f14860df5/images/thumbs/p1.jpeg


--------------------------------------------------------------------------------
/images/thumbs/p2.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tsanak/vue-carousel/93534d2b8245e1de1126fcadbc181f8f14860df5/images/thumbs/p2.jpeg


--------------------------------------------------------------------------------
/images/thumbs/p3.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tsanak/vue-carousel/93534d2b8245e1de1126fcadbc181f8f14860df5/images/thumbs/p3.jpeg


--------------------------------------------------------------------------------
/images/thumbs/p4.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tsanak/vue-carousel/93534d2b8245e1de1126fcadbc181f8f14860df5/images/thumbs/p4.jpeg


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7 |     <title>Vue slider</title>
  8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
  9 |     <link rel="stylesheet" href="carousel.css">
 10 | </head>
 11 | <body>
 12 |     <section class="section" id="app">
 13 |         <div class="columns">
 14 |             <div class="column is-4">
 15 |                 <div class="card">
 16 |                     <div class="card-content">
 17 |                         <div class="card-carousel">
 18 |                             <div class="card-img">
 19 |                                 <img :src="currentImage" alt="">
 20 |                                 <div class="actions">
 21 |                                     <span @click="prevImage" class="prev">
 22 |                                         <i class="fas fa-chevron-left"></i>
 23 |                                     </span>
 24 |                                     <span @click="nextImage" class="next">
 25 |                                         <i class="fas fa-chevron-right"></i>
 26 |                                     </span>
 27 |                                 </div>
 28 |                             </div>
 29 |                             <div class="thumbnails">
 30 |                                 <div 
 31 |                                     v-for="(image, index) in  images"
 32 |                                     :key="image.id"
 33 |                                     :class="['thumbnail-image', (activeImage == index) ? 'active' : '']"
 34 |                                     @click="activateImage(index)"
 35 |                                 >
 36 |                                     <img :src="image.thumb">
 37 |                                 </div>
 38 |                             </div>
 39 |                         </div>
 40 |                         <p>Oh hi there</p>
 41 |                     </div>
 42 |                 </div>
 43 |             </div>
 44 |         </div>
 45 |     </section>
 46 | 
 47 |     <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
 48 |     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
 49 |     <script>
 50 | 
 51 |         var app = new Vue({
 52 |             el: '#app',
 53 |             data() {
 54 |                 return {
 55 |                     images: [
 56 |                         {
 57 |                             id: '1',
 58 |                             big: 'images/p1.jpeg',
 59 |                             thumb: 'images/thumbs/p1.jpeg'
 60 |                         },
 61 |                         {
 62 |                             id: '2',
 63 |                             big: 'images/p2.jpeg',
 64 |                             thumb: 'images/thumbs/p2.jpeg'
 65 |                         },
 66 |                         {
 67 |                             id: '3',
 68 |                             big: 'images/p3.jpeg',
 69 |                             thumb: 'images/thumbs/p3.jpeg'
 70 |                         },
 71 |                         {
 72 |                             id: '4',
 73 |                             big: 'images/p4.jpeg',
 74 |                             thumb: 'images/thumbs/p4.jpeg'
 75 |                         }
 76 |                     ],
 77 |                     activeImage: 0
 78 |                 }
 79 |             },
 80 |             computed: {
 81 |                 currentImage() {
 82 |                     return this.images[this.activeImage].big;
 83 |                 }
 84 |             },
 85 |             methods: {
 86 |                 nextImage() {
 87 |                     var active = this.activeImage + 1;
 88 |                     if(active >= this.images.length) {
 89 |                         active = 0;
 90 |                     }
 91 |                     this.activateImage(active);
 92 |                 },
 93 |                 prevImage() {
 94 |                     var active = this.activeImage - 1;
 95 |                     if(active < 0) {
 96 |                         active = this.images.length - 1;
 97 |                     }
 98 |                     this.activateImage(active);
 99 |                 },
100 |                 activateImage(imageIndex) {
101 |                     this.activeImage = imageIndex;
102 |                 }
103 |             }
104 |         });
105 |     </script>
106 | </body>
107 | </html>


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