Discussion :

[hadidi]

Bonjour,

je suis graphiste spécialisé dans le print et la typographie, et je suis actuellement en train de bricoler un site internet.
Je dis "bricoler" car mes connaissances en code sont limitées, ainsi mon site se construit entre visionnage de tutoriels et petits bouts de code glanés à droite à gauche.
Bref beaucoup de choses ne vont pas dans la structure même, mais ce sujet concerne un point précis que je n'arrive pas à saisir et solutionner; en voici les caractéristiques:

Je veux créer un carousel d'images pour présenter mes projets, avec des flèches "prev" et "next" pour passer d'une slide à l'autre.
Pour la version bureau avec affichage navigateur de grande taille, j'ai disposé deux images côte à côte pour chaque slide. Chaque slide affiche donc un binôme d'images.

Lorsque la largeur du navigateur se réduit, j'aimerai que chaque slide n'affiche plus qu'une seule image.
J'ai plus ou moins réussi à le faire, mais le problème est le suivant:
Dans sa version "image unique", lorsque je navigue avec les flèches "prev" et "next", le carousel n'affiche plus qu'une image sur deux.

J'ai mis le "template" de mon site en ligne afin de pouvoir le tester sur plusieurs navigateurs, il est donc accessible. En voici le lien www.duoimpair.com
(Attention les yeux j'ai mis des couleurs pour bien repérer tout mes éléments...)

Voici maintenant le code, je ne vais mettre que la partie correspondant au carousel pour essayer de limiter:

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
<div class="carousel-container">
 
                    <!--<div class="prev nav-btn">?</div>-->
                    <div class="prev nav-btn"></div>
 
                <div class="carousel">
 
                    <div class="item main">
                    <img src="assets/Image1.jpg"/>
                    <img src="assets/Image2.jpg"/>
 
                        <div class="caption">
            <ul class="cap">
                <li>template template template template template template template template template template template template</li>
                <li>template template template template template template template template template template template template</li>
                <li>template template template template template template template template template template template template</li>
            </ul>
                        </div>
                    </div>
 
                    <div class="item">
                    <img src="assets/Image3.jpg"/>
                    <img src="assets/Image4.jpg"/>
 
                        <div class="caption">
            <ul class="cap">
                <li>template2 template template template template template template template template template template template</li>
                <li>template template template template template template template template template template template template</li>
                <li>template template template template template template template template template template template template</li>
            </ul>
                        </div>
                    </div>
 
                    <div class="item">
                    <img src="assets/Image5.jpg"/>
                    <img src="assets/Image6.jpg"/>
 
                        <div class="caption">
            <ul class="cap">
                <li>template3 template template template template template template template template template template template</li>
                <li>template template template template template template template template template template template template</li>
                <li>template template template template template template template template template template template template</li>
            </ul>
                        </div>
                    </div>
 
                </div>
 
                <!--<div class="next nav-btn ">?</div>-->
                <div class="next nav-btn "></div>
 
<script src="app.js"></script>
 
                </div>

Css pour deux images par slide

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
.carousel-container {
    position: absolute;
    display: inline-block;
    text-align: center;
    margin: 40px 0 0 0;
    padding: 0;
    width: 100%;
    height: 95%;
    background-color: orangered;
    }
 
.carousel {
    position: relative;
    display: inline-block;
    text-align: center;
    padding: 0;
    width: 80%;
    height: 90%;
    transition: all 0.3s ease;
    background-color: blue;
    }
 
.prev {
    position: relative;
    display: inline-block;
    top: -45%;
    width: 5%;
    height: 10%;
    }
 
.next {
    position: relative;
    display: inline-block;
    top: -45%;
    width: 5%;
    height: 10%;
    }
 
.nav-btn {
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    background-color: grey;
    }
 
.item {
    display: none;
    }
 
.main {
    display: inline-block;
    }
 
 .carousel img {
    position: relative;
    display: inline-block;
    padding: 15px 15px 15px 15px;
    margin: auto;
    max-width: 35%;
    transition: all 0.3s ease;
    }

Css pour image unique à chaque slide

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
.carousel-container {
    position: absolute;
    text-align: center;
    margin: 40px 0 0 0;
    padding: 0;
    width: 100%;
    height: 95%;
    background-color: orangered;
    }
 
.carousel {
    position: absolute;
    display: block;
    text-align: center;
    margin-left: 10%;
    top: 0;
    padding: 0;
    width: 80%;
    height: 95%;
    transition: all 0.3s ease;
    background-color: blue;
    }
 
.prev {
    z-index: 10;
    float: left;
    width: 5%;
    height: 10%;
    }
 
.next {
    z-index: 10;
    float: right;
    width: 5%;
    height: 10%;
    }
 
.nav-btn {
    position: relative;
    margin-top: 60%;
    cursor: pointer;
    -webkit-user-select: none;
    background-color: purple;
    }
 
.item {
    display: none;
    }
 
.main {
    display: block;
    }
 
 .carousel img {
    position: absolute;
    display: block;
    padding: 15px 15px 15px 15px;
    margin-left: 25%;
    max-width: 42%;
    transition: all 0.3s ease;
    }

Javascript pour carousel

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

Merci d'avance pour votre aide

[NoSmoking]

Bonjour,
pas vu le souci sur ton « template » d'autant que tu utilises les médias-queries ce qui est une bonne solution !

Peut-être est-ce donc résolu ?

[hadidi]

Bonjour!

Non, problème toujours non résolu...

[NoSmoking]

Il faudrait que tu expliques précisément ce que tu souhaites obtenir, ce n'est pas très clair pour moi.

De plus on n'a plus accès à ton code de test

[BKaernel]

Dans ton site en ligne, je ne vois aucun fichier JS appelé.

Place ton fichier JS avant la balise fermante </body>.

A partir de là tu verras dans la console ( clic droit - inspecter ) ce que ça donne.

---

Autre chose (qui n'a rien à voir avec le slider"), tu appels un fichier css "font" mais aucune ressource de ce type n'existe dans tes ressources.

---

Dernière chose. Sais tu qu'il est possible de se passer de JS pour faire un slider.
En css 100%, c'est possible : exemple

[hadidi]

....Dernière chose. Sais tu qu'il est possible de se passer de JS pour faire un slider.
En css 100%, c'est possible ...

Merci pour l'article sur le slider en 100% CSS, je vais regarder cela de plus près.
J'ai trouvé une solution temporaire pour le passage de mon carousel de deux à une image, je marque donc cette discussion comme résolue.