Discussion :

[hadidi]

Bonjour,

pour un site internet que je suis en train de développer, j'ai récupéré et adapté un script js qui me permet d'avoir un carousel d'images.
Ce carousel à une version pour les grands affichages, version dans laquelle deux images sont juxtaposées pour une même slide.
La version pour les affichages de taille réduite ne comporte plus qu'une seule image par slide.

Pour ce faire j'ai opté pour la solution de créer deux carousels différents, appelés par des media queries.
Ce n'est peut-être pas la meilleure solution mais pour le moment cela fonctionne.
J'ai testé sur chrome, opera, firefox et safari.

Sur les trois premiers navigateurs cela fonctionne, lorsque je clique sur ma flèche pour aller à l'image suivante l'action fonctionne, idem lorsque je clique sur la flèche pour revenir à l'image précédente.
En revanche sur Safari je ne peux pas cliquer sur les flèches, cela ne fonctionne pas.
J'ai essayé de trouver des réponses ailleurs mais mes connaissances en js sont très limitées. Alors merci d'avance pour votre aide
Je ne sais pas s'il est nécessaire que je joigne ici mes codes html et css, je commence donc seulement par le JS.

Voici mon script 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
//SLIDER POUR IMAGES
 
if (window.matchMedia("(max-width: 960px)").matches) {
    // do stuff when your screen width is lower than 960px
 
const prev = document.querySelector('.smallnext');
const next = document.querySelector('.smallprev');
const images = document.querySelector('.carouselsmall').children;
const totalImages = images.length;
let index = 0;
 
prev.addEventListener('click', () => {
  nextImage('smallnext');
})
 
next.addEventListener('click', () => {
  nextImage('smallprev');
})
 
function nextImage(direction) {
  if(direction == 'smallnext') {
    index++;
    if(index == totalImages) {
      index = 0;
    }
  } else {
    if(index == 0) {
      index = totalImages - 1;
    } else {
      index--;
    }
  }
 
  for(let i = 0; i < images.length; i++) {
    images[i].classList.remove('main');
  }
  images[index].classList.add('main');
}
 
 
   } else {
    // do stuff when your screen width is greater than 960px
 
 
const prev = document.querySelector('.next');
const next = document.querySelector('.prev');
const images = document.querySelector('.carousel').children;
const totalImages = images.length;
let index = 0;
 
prev.addEventListener('click', () => {
  nextImage('next');
})
 
next.addEventListener('click', () => {
  nextImage('prev');
})
 
function nextImage(direction) {
  if(direction =='next') {
    index++;
    if(index == totalImages) {
      index = 0;
    }
  } else {
    if(index == 0) {
      index = totalImages - 1;
    } else {
      index--;
    }
  }
 
  for(let i = 0; i < images.length; i++) {
    images[i].classList.remove('main');
  }
  images[index].classList.add('main');
}
   }

[ASCIIDEFOND]

Salut hadidi,

Avec une constante, l'identifiant ne peut être réaffecté.

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
...
const prev = document.querySelector('.smallnext');
const next = document.querySelector('.smallprev');
const images = document.querySelector('.carouselsmall').children;
...
const prev = document.querySelector('.next');
const next = document.querySelector('.prev');
const images = document.querySelector('.carousel').children;
...

https://developer.mozilla.org/fr/doc...atements/const

[hadidi]

...Avec une constante, l'identifiant ne peut être réaffecté.

Merci,

J'avoue que j'ai très très peu de connaissance en js... Je ne comprends donc pas très bien l'article dont tu as envoyé le lien.
Le problème dans mon script est la syntaxe ? Il faudrait que je change la constante par autre chose ?
Aussi, pourquoi cela fonctionne sur tous les navigateurs sauf safari ?

[ASCIIDEFOND]

Remplacer les déclarations const avec var pour que les valeurs soient variables et non plus constantes.

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
...
var prev = document.querySelector('.smallnext');
var next = document.querySelector('.smallprev');
var images = document.querySelector('.carouselsmall').children;
...
var prev = document.querySelector('.next');
var next = document.querySelector('.prev');
var images = document.querySelector('.carousel').children;
...

Si tu avais la partie HTML du code à nous présenter pour pouvoir le tester.

[hadidi]

Remplacer les déclarations const avec var .....

Voici la partie du

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
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
<!DOCTYPE html>
<html>
<head>
 
  	<title>Duo Impair</title>
    <link rel="icon" type="image/x-icon" href="images/favimpair.png">
 	  <meta charset="UTF-8" />
    <meta name="Author" content="Duo Impair">
    <meta name="Description" content="Duo Impair, french graphic design studio.">
    <meta name="Keywords" content="Graphic Design, Art Direction, Typography, Research, Photography">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <!--<link rel='stylesheet' id='fonts-css'  href='fonts/font.css' type='text/css' media='all' />-->
    <link rel='stylesheet' id='style-css'  href='styles/style.css' type='text/css' media='all' />
 
</head>
 
 
<body>
 
 
	<!--------------------------------------------- Haut de Page --------------------------------------------->
 
	<header role="header">
 
 
		<nav class="menu" role="sections">
 
                <div class="inner">
 
            <div class="m-left">
                 <h1 class="logo">DUO IMPAIR &emsp; Graphic Design Studio</h1>
            </div>
 
            <div class="m-right">
                <a href="index.html" class="m-link" style="color: blue">Projects</a>
                <a href="info.html" class="m-link">About</a>
            </div>
 
                </div>            
 
	</header>
 
 
    <!--------------------------------------------- Images et légendes --------------------------------------------->
 
 
            <div class="carousel-container">
 
                    <!--<div class="prev nav-btn">←</div>-->
                    <div class="prev nav-btn"><img src="images/arrowdotl.png"/></div>
 
                <div class="carousel">
 
                    <div class="item main">
            <img src="images/HutteSite1.jpg"/>
            <img src="images/HutteSite2.jpg"/>
 
            <div class="caption">
            <ul class="cap">
                <li>Hutte Mono (Regular & Swash), Type Design, 2023.</li>
                <li>The font design was inspired by the regular shapes defined by mono typefaces together with rounded terminals. Hutte is taking a step aside from the common monospace fonts with the Swash version that plays with the spacing, the ornaments and the flourishing aspects of the letters.</li>
            </ul>
                        </div>
                    </div>
 
 
                    <div class="item">
            <img src="images/Bushel1.jpg"/>
            <img src="images/Bushel2.jpg"/>
 
            <div class="caption">
            <ul class="cap">
                <li>Bushels of Goodness and Warmth, Graphic design, Layout, 2022 [with Jordan Derrien and V.O Curations Gallery (London)]</li>
                <li>Catalogue of the exhibition: Bushels of goodness by the artist Jordan Derrien. With a text written by Marie de Brugerolle and photographies taken by Theo Christelis.</li>
            </ul>
                        </div>
                    </div>
 
                    <div class="item">
            <img src="images/SupaVenezia1.jpg"/>
            <img src="images/SupaVenezia2.jpg"/>
 
                        <div class="caption">
            <ul class="cap">
                <li>SupaVenezia Cap, Identity, Graphic Design, 2022 [with the artist Sarah Staton]</li>
                <li>SupaVenezia is part of SupaStore the event based durational artwork of the artist Sarah Staton, an ongoing series of stores as exhibitions established in 1993. We used the Brizeux font designed by Roman Seban and Véfa Lucas.</li>
            </ul>
                        </div>
                    </div>
 
                </div>
 
                <!--<div class="next nav-btn ">→</div>-->
                <div class="next nav-btn "><img src="images/arrowdotr.png"/></div>
 
<!--<script type="text/javascript" src="scripts/app.js"></script>-->
 
 
                </div> 
 
 
 
 
<!--------------------------------------------- Images et légendes small devices  --------------------------------------------->
 
 
<div class="carousel-containersmall">
 
                    <div class="smallprev smallnav-btn"><img src="images/arrowdotl.png"/></div>
 
                <div class="carouselsmall">
 
                    <div class="item main">
            <img src="images/HutteSite1.jpg"/>
 
            <div class="captionsmall">
            <ul class="capsmall">
                <li>Hutte Mono (Regular & Swash), Type Design, 2023.</li>
                <li>The font design was inspired by the regular shapes defined by mono typefaces together with rounded terminals. Hutte is taking a step aside from the common monospace fonts with the Swash version that plays with the spacing, the ornaments and the flourishing aspects of the letters.</li>
            </ul>
                        </div>
                    </div>
 
                     <div class="item">
            <img src="images/HutteSite2.jpg"/>
 
            <div class="captionsmall">
            <ul class="capsmall">
                <li>Hutte Mono (Regular & Swash), Type Design, 2023.</li>
                <li>The font design was inspired by the regular shapes defined by mono typefaces together with rounded terminals. Hutte is taking a step aside from the common monospace fonts with the Swash version that plays with the spacing, the ornaments and the flourishing aspects of the letters.</li>
            </ul>
                        </div>
                    </div>
 
 
                    <div class="item">
            <img src="images/Bushel1.jpg"/>
 
            <div class="captionsmall">
            <ul class="capsmall">
                <li>Bushels of Goodness and Warmth, Graphic design, Layout, 2022 [with Jordan Derrien and V.O Curations Gallery (London)]</li>
                <li>Catalogue of the exhibition: Bushels of goodness by the artist Jordan Derrien. With a text written by Marie de Brugerolle and photographies taken by Theo Christelis.</li>
            </ul>
                        </div>
                    </div>
 
                    <div class="item">
            <img src="images/Bushel2.jpg"/>
 
            <div class="captionsmall">
            <ul class="capsmall">
                <li>Bushels of Goodness and Warmth, Graphic design, Layout, 2022 [with Jordan Derrien and V.O Curations Gallery (London)]</li>
                <li>Catalogue of the exhibition: Bushels of goodness by the artist Jordan Derrien. With a text written by Marie de Brugerolle and photographies taken by Theo Christelis.</li>
            </ul>
                        </div>
                    </div>
 
                    <div class="item">
            <img src="images/SupaVenezia1.jpg"/>
 
                        <div class="captionsmall">
            <ul class="capsmall">
                <li>SupaVenezia Cap, Identity, Graphic Design, 2022 [with the artist Sarah Staton]</li>
                <li>SupaVenezia is part of SupaStore the event based durational artwork of the artist Sarah Staton, an ongoing series of stores as exhibitions established in 1993. We used the Brizeux font designed by Roman Seban and Véfa Lucas.</li>
            </ul>
                        </div>
                    </div>
 
                    <div class="item">
            <img src="images/SupaVenezia2.jpg"/>
 
            <div class="captionsmall">
            <ul class="capsmall">
                <li>SupaVenezia Cap, Identity, Graphic Design, 2022 [with the artist Sarah Staton]</li>
                <li>SupaVenezia is part of SupaStore the event based durational artwork of the artist Sarah Staton, an ongoing series of stores as exhibitions established in 1993. We used the Brizeux font designed by Roman Seban and Véfa Lucas.</li>
            </ul>
                        </div>
                    </div>
 
                </div>
 
                <!--<div class="next nav-btn ">→</div>-->
                <div class="smallnext smallnav-btn "><img src="images/arrowdotr.png"/></div>
 
<!--<script type="text/javascript" src="scripts/app.js"></script>-->
 
                </div>
 
 
    <!--------------------------------------------- Pied de Page --------------------------------------------->
 
<script type="text/javascript" src="scripts/app.js"></script>
</body>
</html>

[ASCIIDEFOND]

Insérer la même fonction (function nextImage(direction)) dans deux instructions if, cela ne me semble pas très conventionnel.

Peux-tu nous donner le code CSS, parce que là je patauge un peu.