Créer un carrousel personnalisé d'images avec Vue.js

**Fyoni** · 22/02/2022, 02h56

Salut à tous, depuis quelques mois maintenant, j'ai décidé d'apprendre Vue.js, pour cela j'ai décidé de choisir un projet sur lequel j'apprendrai afin que mon expérience d'apprentissage soit plus pratique, je travaille actuellement sur un carrousel qui fonctionnait parfaitement comme je je veux avec JQUERY mais je voudrais le faire maintenant avec Vue.js. Le problème actuel est que je n'arrive pas à rendre la transition dynamique au niveau du <div class="items placeholder-slider" style="transform: translateX(-960px);">, normale -960px devrait s'incrémenter à chaque passage d'une image à une autre en cliquant sur next et se décrémenter en cliquant sur précédent, mais je n'arrive pas pour le moment à le faire, j'ai besoin d'aide svp

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>vue.js carousel</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="app">
  <section class="slide-placeholder">
      <div class="slide-placeholder__carousel-container">
          <div class="carousel-container__background" :style="'background-image: url(' + carousels[show].img + ')'"></div>
            <div class="custom__container">
                <div class="carousel-container" ref="carousel" data-auto="true" data-delay="1500000" @mouseenter.stop="toggleTimer = false" @mouseleave.stop="toggleTimer = true" @touchstart.stop="touchStart" @touchmove.stop="touchMove" :style="'min-height:' + minHeight ">
                  <keep-alive>
                    <transition :name="carouselName">
                      <div class="items placeholder-slider" v-for="(s, i) in carousels" :key="i" :class="{ 'active': show == i }" style="transform: translateX(-960px);">
                            <div class="slider-item active">
                                <div class="carousel-container__slide">
                                  <a :href="s.href">
                                      <img :src="s.img" class="carousel-container__slide__content">
                                  </a>
                                </div>
                            </div>
                      </div>
                    </transition>
                  </keep-alive>
                  <a class="button-prev" href="#" @click.prevent="toPrev" style="color: white; text-decoration:none; font-size:50px">
                      <
                  </a>
                  <a class="button-next" href="#" @click.prevent="toNext" style="color: white; text-decoration:none; font-size:50px">
                      >
                  </a>
                  <div class="dot-group"><a v-for="(l, i) in len" href="#" :class="{ 'active': show == i }" @click.prevent="show = i"></a></div>
                </div>
            </div>
    </div>
  </section>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.js"></script>
</body>
</html>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
.slide-placeholder {
    position: relative;
}
 
@media screen and (min-width: 769px), print{
.slide-placeholder {
    min-height: 190px;
    margin-bottom: 16px;
}
}
 
.slide-placeholder:before {
    content: '';
    width: 100%;
    background: #0095da;
    position: absolute;
    top: 0;
}
 
.slide-placeholder__carousel-container {
    position: relative;
    margin: 0 auto;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}
 
.carousel-container__background {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-position: top;
    background-repeat: no-repeat;
    position: absolute;
    -webkit-filter: blur(20px);
    filter: blur(20px);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 20%;
}
 
.custom__container {
    width: 100%;
    position: relative;
}
 
.slide-placeholder__carousel-container .custom__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 0;
}
 
.carousel-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
 
.carousel-container .items {
    height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
 
.carousel-container .items.placeholder-slider {
    margin: 10px auto;
}
 
@media screen and (min-width: 960px){
.carousel-container .items.placeholder-slider {
    width: 80%;
}
}
 
@media screen and (min-width: 769px), print{
.carousel-container .items.placeholder-slider {
    max-width: none;
}
}
 
@media screen and (min-width: 769px), print{
.carousel-container .items .slider-item {
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
}
}
 
@media screen and (min-width: 960px){
.carousel-container .items.placeholder-slider .slider-item {
    -webkit-transform: scale(0.92);
    transform: scale(0.92);
}
}
 
 
@media screen and (min-width: 960px){
.carousel-container .items.placeholder-slider .slider-item.active {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}
}
 
img {
    display: table;
    max-width: 100%;
    object-fit: cover;
    margin: 0 auto;
}
 
.carousel-container__slide__content {
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}
 
@media screen and (min-width: 769px), print{
.carousel-container__slide__content {
    border-radius: 16px;
}
}
 
/********* Pagination Container **********/
.pagination-container {
    margin-top: -6px;
    margin-left: 3%;
    z-index: 2;
}
 
@media screen and (min-width: 960px){
.pagination-container {
    bottom: -15px;
    width: 80%;
    margin: -10px auto 0;
}
}
 
.pagination-container__top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
 
.pagination-container__top__nav {
    background-color: #FFFFFF;
    border-radius: 0 0 8px 8px;
    padding: 4px;
}
 
.pagination__nav {
    height: 6px;
    width: 6px;
    display: inline-block;
    margin: 0 1px;
    background-color: #858585;
    opacity: 0.24;
    border-radius: 10px;
    -webkit-transition: width 0.1s ease-out;
    transition: width 0.1s ease-out;
    cursor: pointer;
}
 
.pagination__nav--active {
    width: 12px;
    opacity: 1;
    background-color: #0095da;
}
 
@media screen and (min-width: 769px), print{
.carousel-container__all-promos {
    bottom: 11px;
}
}
 
.carousel-container__all-promos__item {
    font-family: 'efframedium';
    z-index: 2;
    bottom: 0px;
    color: #0095da;
    font-size: 16px;
    border-radius: 0 0 8px 8px;
    background: white;
}
 
.carousel-container__all-promos * {
    padding: 4px;
}
 
.carousel-container__all-promos__promos-button {
    cursor: pointer;
    color: #0095da;
    font-size: 16.5px;
    font-weight: bold;
}

Vue.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
// carousel items
const carousels = [
    {
        img: 'https://www.static-src.com/siva/asset//02_2022/GI-JAN-2022-2000x500-desktop-16feb.jpg?w=960',
        href: "#"
    },
    {
        img: 'https://www.static-src.com/siva/asset//02_2022/bliresto-feb22-blm-carousel-desktop-2000x500_desktop_16feb.jpg?w=960',
        href: "#"
    },
    {
        img: 'Home-Desk-Hometronics-Valentine-12-13-Feb-22.jpg',
        href: "#"
    },
    {
        img: 'https://www.static-src.com/siva/asset//02_2022/rabcan-homepage2000x500-desktop-16feb.jpg?w=960',
        href: "#"
    }
];
 
// vue
new Vue({
  el: '#app',
  data: {
        carouselName: 'carousel-next',
        carousels: carousels,
        len: 0,
    show: 0,
        xDown: null, // for swiper
        yDown: null, // for swiper
        autoplay: false, 
        timer: null, // auto play
        timerDelay: 3000, 
        toggleTimer: true, // pause auto play
        minHeight: 0 
  },
    methods: {
        toNext() {
            this.carouselName = 'carousel-next';
            this.show + 1 >= this.len ? this.show = 0 : this.show = this.show + 1;
        },
        toPrev() {
            this.carouselName = 'carousel-prev';
            this.show - 1 < 0 ? this.show = this.len - 1 : this.show = this.show - 1;
        },
        // swiper event(for mobile)
        touchStart(e) {
            this.xDown = e.touches[0].clientX;
            this.yDown = e.touches[0].clientY;
        },
        touchMove(e) {
            const _this = this;
            if(!this.xDown || !this.yDown) { return; }
 
            let xUp = e.touches[0].clientX;
            let yUp = e.touches[0].clientY;
 
            let xDiff = this.xDown - xUp;
            let yDiff = this.yDown - yUp;
 
            if(Math.abs(xDiff) > Math.abs(yDiff)) {
                xDiff > 0 ? _this.toNext() : _this.toPrev();
            }
            this.xDown = null;
            this.yDown = null;
        },
        //
        autoPlay() {
            setInterval(() => {
                if(this.toggleTimer) this.toNext();
            }, this.timerDelay);
        }
    },
    mounted() {
        this.len = this.carousels.length;
        this.autoplay = this.$refs.carousel.dataset.auto == 'true';
        this.timerDelay = Number(this.$refs.carousel.dataset.delay) || 3000;
        if(this.autoplay) this.autoPlay();
        window.addEventListener('load', () => {
            this.minHeight = this.$refs.carousel.offsetHeight + 'px';
        });
    },
});

**NoSmoking** · 23/02/2022, 16h06

Bonjour,
tout d'abord une remarque sur la structure que je trouve bien complexe pour un simple carousel.

normale -960px devrait s'incrémenter à chaque passage d'une image à une autre en cliquant sur next et se décrémenter en cliquant sur précédent, mais je n'arrive pas pour le moment à le faire

Il faut que le style soit lié et non statique dans tes éléments, il ne faut donc pas écrire style="transform: translateX(-960px);"> mais quelque chose comme :style="`transform: translateX(${);`".

Il existe bien des façons de faire mais la réalisation via un élément <transition> n'est pas conforme il te faut à minima passer par un élément <transform-group>. Tu pourras supprimer <keepalive> qui ne s'applique pas dans ce cas.

Je te propose d’essayer :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<transition-group :name="carouselName" tag="div">
  <div class="items placeholder-slider"
    v-for="(item, index) in carousels" 
    :key="`key-${index}`" 
    :class="{ 'active': show == index }" 
    :style="`transform: translateX(${(index - show) * 100}%);`">
 
    <a :href="item.href">
      <img :src="item.img" class="carousel-container__slide__content">
    </a>
  </div>
</transition-group>

Une autre façon de structurer

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<ul class="list-images" :style="`width:${len * 100}% ;transform: translate(${-(show * 100 / len)}%,0)`">
  <li v-for="(item, index) in carousels" 
    :key="index" 
    :style="`width:${100 /len}%`">
 
    <a :href="item.href">
      <img :src="item.img" class="carousel-container__slide__content">
    </a>
  </li>
</ul>

il y aura surement du CSS à modifier, à toi de voir.

Si il est des choses que tu ne comprends n'hésite pas, pas sûr que cela soit très clair.

Dernière chose, fait une grosse purge dans ton CSS.

**Fyoni** · 07/04/2022, 16h00

@NoSmoking, apres ta solution, voici ce que jai pu accomplir qui fonctionne bien mais le seul probleme est le passage de la derniere image a la 1ere image qui est brusque. Je veux que le passage de la derniere image a la se fasse comme tout les passages precedents, je ne veux pas quelle parcoure toustes autres images avant de trouver la premiere image mais quelle passe directement a la premiere image

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="UTF-8">
        <title>vue.js carousel</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <div id="app">
            <section class="slide-placeholder">
                <div class="slide-placeholder__carousel-container">
                    <div class="carousel-container__background" :style="'background-image: url(' + carousels[show].img + ')'"></div>
                    <div class="custom__container">
                        1st img = 12th img
                        2nd img = 13th img
                        3rd img = 14th img
                        <div class="carousel-container" ref="carousel" data-auto="true" data-delay="5000" @mouseenter.stop="toggleTimer = false" @mouseleave.stop="toggleTimer = true" @touchstart.stop="touchStart" @touchmove.stop="touchMove" :style="'min-height:' + minHeight ">
                            <div class="items placeholder-slider" :style="`transform: translateX(${-(show * 960)}px)`">
                                <div class="slider-item" v-for="(item, index) in carousels" :key="index" :class="{ 'active': show == index }">
                                    <div class="carousel-container__slide">
                                        <a :href="item.href" style="text-decoration: none">
                                            <img :src="item.img" class="carousel-container__slide__content">
                                            <strong> Index : {{index}}</strong> <br>
                                            <strong>Paginination n<sup>o</sup>: {{show}}</strong>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <a class="button-prev" href="#" @click.prevent="toPrev" style="color: white; text-decoration:none; font-size:50px"> < </a>
                            <a class="button-next" href="#" @click.prevent="toNext" style="color: white; text-decoration:none; font-size:50px"> > </a>
                            <div class="pagination-container">
                                <div class="pagination-container__top">
                                    <div class="pagination-container__top__nav">
                                        <a v-for="(l, i) in len" href="#" class="pagination__nav" :class="{ 'pagination__nav--active': show == i }" @click.prevent="show = i"></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.js"></script>
    </body>
</html>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
.slide-placeholder {
    position: relative;
}
 
@media screen and (min-width: 769px), print{
.slide-placeholder {
    min-height: 190px;
    margin-bottom: 16px;
}
}
 
.slide-placeholder:before {
    content: '';
    width: 100%;
    background: #0095da;
    position: absolute;
    top: 0;
}
 
.slide-placeholder__carousel-container {
    position: relative;
    margin: 0 auto;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}
 
.carousel-container__background {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-position: top;
    background-repeat: no-repeat;
    position: absolute;
    -webkit-filter: blur(20px);
    filter: blur(20px);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 20%;
}
 
.custom__container {
    width: 100%;
    position: relative;
}
 
.slide-placeholder__carousel-container .custom__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 0;
}
 
.carousel-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
 
.carousel-container .items {
    height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
 
.carousel-container .items.placeholder-slider {
    margin: 10px auto;
}
 
@media screen and (min-width: 960px){
.carousel-container .items.placeholder-slider {
    position: relative;
    width: 80%;
    transition: all 1s ease;
}
}
 
@media screen and (min-width: 769px), print{
.carousel-container .items.placeholder-slider {
    max-width: none;
}
}
 
@media screen and (min-width: 769px), print{
.carousel-container .items .slider-item {
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    transition: all 1s ease;
}
}
 
@media screen and (min-width: 960px){
.carousel-container .items.placeholder-slider .slider-item {
    -webkit-transform: scale(0.92);
    transform: scale(0.92);
}
}
 
 
@media screen and (min-width: 960px){
.carousel-container .items.placeholder-slider .slider-item.active {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}
}
 
img {
    display: table;
    max-width: 100%;
    object-fit: cover;
    margin: 0 auto;
}
 
.carousel-container__slide__content {
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}
 
@media screen and (min-width: 769px), print{
.carousel-container__slide__content {
    border-radius: 16px;
}
}
 
.pagination-container {
    margin-top: -6px;
    margin-left: 3%;
    z-index: 2;
}
 
@media screen and (min-width: 960px){
.pagination-container {
    bottom: -15px;
    width: 80%;
    margin: -10px auto 0;
}
}
 
.pagination-container__top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
 
.pagination-container__top__nav {
    background-color: #FFFFFF;
    border-radius: 0 0 8px 8px;
    padding: 4px;
}
 
.pagination__nav {
    height: 6px;
    width: 6px;
    display: inline-block;
    margin: 0 1px;
    background-color: #858585;
    opacity: 0.24;
    border-radius: 10px;
    -webkit-transition: width 0.1s ease-out;
    transition: width 0.1s ease-out;
    cursor: pointer;
}
 
.pagination__nav--active {
    width: 12px;
    opacity: 1;
    background-color: #0095da;
}
 
@media screen and (min-width: 769px), print{
.carousel-container__all-promos {
    bottom: 11px;
}
}
 
.carousel-container__all-promos__item {
    font-family: 'efframedium';
    z-index: 2;
    bottom: 0px;
    color: #0095da;
    font-size: 16px;
    border-radius: 0 0 8px 8px;
    background: white;
}
 
.carousel-container__all-promos * {
    padding: 4px;
}
 
.carousel-container__all-promos__promos-button {
    cursor: pointer;
    color: #0095da;
    font-size: 16.5px;
    font-weight: bold;
}
 
.button-prev, .button-next{
  position: absolute;
  z-index: 1;
}
 
.button-prev, .button-next {
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.3s;
}
.button-prev:hover, .button-next:hover {
  opacity: 0.7;
}
.button-prev img, .button-next img {
  display: block;
  max-width: 50px;
}
 
.button-next {
  right: 0;
}

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
// carousel items
const carousels = [
	{
		img: 'https://www.static-src.com/siva/asset//04_2022/Home-Desk-PHILIPS-4-4-April-22-7apr.jpg?w=960',
		href: "#",
	},
	{
		img: 'https://www.static-src.com/siva/asset//04_2022/home-2000x500-kaget-april-desktop-7apr.jpg?w=960',
		href: "#",
	},
	{
		img: 'https://www.static-src.com/siva/asset//04_2022/4.4-branddeals-desktop-2000x500-7apr.jpg?w=960',
		href: "#",
	},
	{
		img: 'https://www.static-src.com/siva/asset//04_2022/Home-Desk-PHILIPS-4-4-April-22-7apr.jpg?w=960',
		href: "#",
	},
	{
		img: 'https://www.static-src.com/siva/asset//04_2022/220330-Tagihan_Token-April-2000x500-Homepage_Desktop-7apr.jpg?w=960',
		href: "#",
	},
	{
		img: 'https://www.static-src.com/siva/asset//02_2022/GI-JAN-2022-2000x500-desktop-16feb.jpg?w=960',
		href: "#",
	},
	{
		img: 'https://www.static-src.com/siva/asset//02_2022/bliresto-feb22-blm-carousel-desktop-2000x500_desktop_16feb.jpg?w=960',
		href: "#",
	},
	{
		img: 'https://www.static-src.com/siva/asset//02_2022/rabcan-homepage2000x500-desktop-16feb.jpg?w=960',
		href: "#",
	}
];
 
// vue
new Vue({
  el: '#app',
  data: {
		homeCarousel: 'carousel-next',
		carousels: carousels,
		len: 0,
        show: 1,
		xDown: null, // for swiper
		yDown: null, // for swiper
		autoplay: false, //
		timer: null, // auto play
		timerDelay: 3000, //
		toggleTimer: true, // pause auto play
		minHeight: 0 //
  },
	methods: {
		toNext() {
			this.homeCarousel = 'carousel-next';
			//this.show + 1 >= this.len ? this.show = 0 : this.show = this.show + 1;
 
            if ( this.show + 1 >= this.len ){
                this.show = 0;
            }
            else{
                this.show = this.show + 1;
            }
		},
		toPrev() {
			this.homeCarousel = 'carousel-prev';
			//this.show - 1 < 0 ? this.show = this.len - 1 : this.show = this.show - 1;
 
            if ( this.show - 1 < 0 ){
                this.show = this.len - 1;
            }
            else{
                this.show = this.show - 1;
            }
		},
		// swiper event(for mobile)
		touchStart(e) {
			this.xDown = e.touches[0].clientX;
			this.yDown = e.touches[0].clientY;
		},
		touchMove(e) {
			const _this = this;
			if(!this.xDown || !this.yDown) { return; }
 
			let xUp = e.touches[0].clientX;
			let yUp = e.touches[0].clientY;
 
			let xDiff = this.xDown - xUp;
			let yDiff = this.yDown - yUp;
 
			if(Math.abs(xDiff) > Math.abs(yDiff)) {
				xDiff > 0 ? _this.toNext() : _this.toPrev();
			}
			this.xDown = null;
			this.yDown = null;
		},
		// 自動輪播
		autoPlay() {
			setInterval(() => {
				if(this.toggleTimer) this.toNext();
			}, this.timerDelay);
		}
	},
	mounted() {
		this.len = this.carousels.length;
		this.autoplay = this.$refs.carousel.dataset.auto == 'true';
		this.timerDelay = Number(this.$refs.carousel.dataset.delay) || 3000;
		if(this.autoplay) this.autoPlay();
		window.addEventListener('load', () => {
			this.minHeight = this.$refs.carousel.offsetHeight + 'px';
		});
	},
});

**NoSmoking** · 09/04/2022, 18h59

je ne veux pas quelle parcoure toustes autres images avant de trouver la premiere image mais quelle passe directement a la premiere image

dans ce cas la conception est différente ainsi que l'approche

Une façon de faire, en ayant au départ :

A - B - C - D- E

il faut avoir

E -A - B - C - D- E - A

la première image (A) est ajoutée en fin de liste et la dernière image (E) est ajoutée en début de liste.

Lorsque tu affiches l'image A, en fin de liste, en ayant fait E -> A et en fin d'affichage de celle-ci tu affiches l’image (A) du début sans transition.

Inversement lorsque tu affiches l'image E, en début de liste, en ayant fait A -> E et en fin d'affichage de celle-ci tu affiches l’image (E) de la fin sans transition.

Il est une façon de faire bien plus simple comme par exemple :
↪ Diaporama en 3 lignes de code, c'est super génial mais je ne suis pas impartial sur ce coup

Créer un carrousel personnalisé d'images avec Vue.js

VueJS

Discussions similaires

Partager

Partager