Carousel avec pages de taille non fixe
Bonjour
J'ai un slideshow avec des pages qui peuvent avoir des tailles différentes
==> Le slideshow ne reste pas positionné de manière fixe avec des boutons avec une position stable !
SOS !
Patrick
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
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
|
<! ================= Slideshow ========================================= >
<div style="background-color: #F1F1F1; margin-top:0!important; margin-bottom:0!important;width:100%;height:80%;padding: 0;">
<div>
<div style="display: flex; justify-content: space-around; flex-wrap: wrap;align-items: center;">
<div class="mySlides" style="background-color: #F1F1F1;width:100%;height:80%;padding: 0;">
<div style="background-color: #F1F1F1;width:100%;height:80%;">
<p> </p>
<p style="text-align:center;"><titre2-normal><typo>La démarche d'Excellence 4.0 en 4 étapes</typo></titre2-normal> </p>
<p> </p>
<p> </p>
<p style="text-align:center;"><libelle-vert>Durant la phase d'initialisation vous identifez vos domaines d'excellence et vos cibles prioritaires en fonction de votre stratégie. Ensuite, chaque année, vous élaborez un plan de progrès fondé sur les résultats de l'évaluation PEPP'S sur le terrain. </libelle-vert></p>
<p> </p>
<p style="text-align:center;"><img alt="" src="templates/rt_galatea/custom/images/assets/icones/logo_pepps_coeur_vert.png" /></p>
<p> </p>
</div>
</div>
<div class="mySlides" style="background-color: #F1F1F1;width:100%;height:80%;">
<div style="background-color: #F1F1F1;width:100%;height:80%;">
<p> </p>
<p><span class="x3-tag x3-vert"> PHASE 1 </span> <span style="text-align:center;"><titre2-normal><typo>L'identification des domaines d'excellence</typo></titre2-normal> </span></p>
<p> </p>
<p> </p>
<p style="text-align:center;"><libelle-vert>La première étape consiste à identifier vos domaines d'actions prioritaires - ceux sur lesquels va se jouer la différenciation de votre entreprise pour les années à venir. </libelle-vert></p>
<p> </p>
<p style="text-align:center;"><libelle3-gras>Avec cette première étape, vous déclinez concrètement votre stratégie en champs d'actions concrets et durables : Voici le Cap!</libelle3-gras></p>
<p> </p>
</div>
</div>
<div class="mySlides" style="background-color: #F1F1F1;width:100%;height:80%;">
<div style="background-color: #F1F1F1;width:100%;height:80%;">
<p> </p>
<p><span class="x3-tag x3-vert"> PHASE 1 </span> <span style="text-align:center;margin:auto;"><titre2-normal><typo>L'identification des domaines d'excellence</typo></titre2-normal> </span></p>
<p> </p>
<p> </p>
<p style="text-align:center;"><libelle-vert>La première étape consiste à identifier vos domaines d'actions prioritaires - ceux sur lesquels va se jouer la différenciation de votre entreprise pour les années à venir. </libelle-vert></p>
<p> </p>
<p style="text-align:center;"><libelle3-gras>Avec cette première étape, vous déclinez concrètement votre stratégie en champs d'actions concrets et durables : Voici le Cap!</libelle3-gras></p>
</div>
</div>
<div class="mySlides" style="background-color: #F1F1F1;width:100%;height:80%;">
<div style="background-color: #F1F1F1;width:100%;height:80%;">
<p> </p>
<p><span class="x3-tag x3-vert"> PHASE 1 </span> <span style="text-align:center;"><titre2-normal><typo>L'identification des domaines d'excellence</typo></titre2-normal> </span></p>
<p> </p>
<p> </p>
<p style="text-align:center;"><libelle-vert>La première étape consiste à identifier vos domaines d'actions prioritaires - ceux sur lesquels va se jouer la différenciation de votre entreprise pour les années à venir. </libelle-vert></p>
<p> </p>
<p style="text-align:center;"><libelle3-gras>Avec cette première étape, vous déclinez concrètement votre stratégie en champs d'actions concrets et durables : Voici le Cap!</libelle3-gras></p>
</div>
</div>
</div>
</div>
</div>
<div class="w3-center" style="background-color: #F1F1F1;margin-top:0!important; margin-bottom:0!important;padding: 0;">
<div class="w3-section">
<button class="w3-btn" style ="border-radius: 16px; background-color: #525252; font-size:0.9 rem;" onclick="plusDivs(-1)">❮ Prec</button>
<button class="w3-btn" style ="border-radius: 16px; background-color: #525252; font-size:0.9 rem;" onclick="plusDivs(1)">Suiv ❯</button>
</div>
<button class="w3-btn demo" style ="background-color: #525252; font-size:0.7 rem;" onclick="currentDiv(1)">1</button>
<button class="w3-btn demo" style ="background-color: #525252; font-size:0.7 rem;" onclick="currentDiv(2)">2</button>
<button class="w3-btn demo" style ="background-color: #525252; font-size:0.7 rem;" onclick="currentDiv(3)">3</button>
<button class="w3-btn demo" style ="background-color: #525252; font-size:0.7 rem;" onclick="currentDiv(4)">4</button>
</div>
<p> </p>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-red", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-red";
}
</script> |
