Skip to content
This repository was archived by the owner on Feb 24, 2023. It is now read-only.

Commit 7c07c85

Browse files
author
Łukasz Florczak
authored
Merge pull request #80 from lukaszflorczak/develop
v1.0.3
2 parents 16548a9 + 0955305 commit 7c07c85

File tree

4 files changed

+44
-41
lines changed

4 files changed

+44
-41
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -241,7 +241,7 @@ This option is useful for example for creating a photo gallery with two related
241241
<agile ref="thumbnails" :as-nav-for="[$refs.main]" :slides-to-show="4" autoplay>...</agile>
242242
```
243243

244-
**Important!** If you want to use the autoplay mode is it only in one of the related carousels.
244+
**Important!** If you want to use the autoplay mode use it only in one of the related carousels.
245245

246246
## `v-if` & `v-show`
247247

‎demo/main.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Vue from 'vue'
22
import App from './App.vue'
3-
import Agile from '../src/main'
3+
import Agile from '../src'
44

55
Vue.config.productionTip = false
66

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-agile",
3-
"version": "1.0.2",
3+
"version": "1.0.3",
44
"description": "A carousel component for Vue.js",
55
"author": "Łukasz Florczak <[email protected]>",
66
"license": "MIT",

‎src/Agile.vue‎

Lines changed: 41 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,37 @@
11
<template>
2-
<div class="agile" :class="{'agile--auto-play': settings.autoplay, 'agile--disabled': settings.unagile, 'agile--fade': settings.fade && !settings.unagile, 'agile--rtl': settings.rtl}">
3-
<div ref="list" class="agile__list">
4-
<div ref="track" class="agile__track" :style="{transform: `translate(${translateX + marginX}px)`, transition: `transform ${settings.timing} ${transitionDelay}ms`}" @mouseover="handleMouseOver('track')" @mouseout="handleMouseOut('track')">
5-
<div class="agile__slides agile__slides--cloned" ref="slidesClonedBefore" v-if="clonedSlides">
6-
<slot></slot>
7-
</div>
8-
9-
<div class="agile__slides agile__slides--regular" ref="slides">
10-
<slot></slot>
11-
</div>
12-
13-
<div class="agile__slides agile__slides--cloned" ref="slidesClonedAfter" v-if="clonedSlides">
14-
<slot></slot>
15-
</div>
16-
</div>
17-
</div>
18-
19-
<div class="agile__actions" v-if="!settings.unagile && (settings.navButtons || settings.dots)">
20-
<button v-if="settings.navButtons && !settings.unagile" class="agile__nav-button agile__nav-button--prev" :disabled="!canGoToPrev" @click="goToPrev(), restartAutoPlay()" type="button" ref="prevButton">
21-
<slot name="prevButton">←</slot>
22-
</button>
23-
24-
<ul ref="dots" v-if="settings.dots && !settings.unagile" class="agile__dots">
25-
<li v-for="n in slidesCount" :key="n" class="agile__dot" :class="{'agile__dot--current': n - 1 === currentSlide}" @mouseover="handleMouseOver('dot')" @mouseout="handleMouseOut('dot')">
26-
<button @click="goTo(n - 1), restartAutoPlay()" type="button">{{n}}</button>
27-
</li>
28-
</ul>
29-
30-
<button v-if="settings.navButtons && !settings.unagile" class="agile__nav-button agile__nav-button--next" :disabled="!canGoToNext" @click="goToNext(), restartAutoPlay()" type="button" ref="nextButton">
31-
<slot name="nextButton">→</slot>
32-
</button>
33-
</div>
34-
</div>
2+
<div class="agile" :class="{'agile--auto-play': settings.autoplay, 'agile--disabled': settings.unagile, 'agile--fade': settings.fade && !settings.unagile, 'agile--rtl': settings.rtl}">
3+
<div ref="list" class="agile__list">
4+
<div ref="track" class="agile__track" :style="{transform: `translate(${translateX + marginX}px)`, transition: `transform ${settings.timing} ${transitionDelay}ms`}" @mouseover="handleMouseOver('track')" @mouseout="handleMouseOut('track')">
5+
<div class="agile__slides agile__slides--cloned" ref="slidesClonedBefore" v-if="clonedSlides">
6+
<slot></slot>
7+
</div>
8+
9+
<div class="agile__slides agile__slides--regular" ref="slides">
10+
<slot></slot>
11+
</div>
12+
13+
<div class="agile__slides agile__slides--cloned" ref="slidesClonedAfter" v-if="clonedSlides">
14+
<slot></slot>
15+
</div>
16+
</div>
17+
</div>
18+
19+
<div class="agile__actions" v-if="!settings.unagile && (settings.navButtons || settings.dots)">
20+
<button v-if="settings.navButtons && !settings.unagile" class="agile__nav-button agile__nav-button--prev" :disabled="!canGoToPrev" @click="goToPrev(), restartAutoPlay()" type="button" ref="prevButton">
21+
<slot name="prevButton">←</slot>
22+
</button>
23+
24+
<ul ref="dots" v-if="settings.dots && !settings.unagile" class="agile__dots">
25+
<li v-for="n in slidesCount" :key="n" class="agile__dot" :class="{'agile__dot--current': n - 1 === currentSlide}" @mouseover="handleMouseOver('dot')" @mouseout="handleMouseOut('dot')">
26+
<button @click="goTo(n - 1), restartAutoPlay()" type="button">{{n}}</button>
27+
</li>
28+
</ul>
29+
30+
<button v-if="settings.navButtons && !settings.unagile" class="agile__nav-button agile__nav-button--next" :disabled="!canGoToNext" @click="goToNext(), restartAutoPlay()" type="button" ref="nextButton">
31+
<slot name="nextButton">→</slot>
32+
</button>
33+
</div>
34+
</div>
3535
</template>
3636

3737
<script>
@@ -262,8 +262,11 @@
262262
263263
watch: {
264264
// Watch window width change
265-
widthWindow () {
266-
this.prepareCarousel()
265+
widthWindow (newValue, oldValue) {
266+
if (oldValue) {
267+
this.prepareCarousel()
268+
this.toggleFade()
269+
}
267270
},
268271
269272
// Watch current slide change
@@ -659,9 +662,9 @@
659662
660663
&--rtl
661664
.agile__track,
662-
.agile__slides,
663-
.agile__dots
664-
flex-direction: row-reverse
665+
.agile__slides,
666+
.agile__dots
667+
flex-direction: row-reverse
665668
666669
&, *
667670
&:focus,

0 commit comments

Comments
 (0)