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');
}
   }