Slider responsive passant de deux images à une image
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:
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:
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:
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:
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
