ce post pour que l'on réfléchisse ensemble sur ce slider d'accueil que l'on peut trouver sur la page d'accueil de Jimdo : http://www.jimdo.com/l/startseite/fr/special1/ et dont j'aimerais bien connaitre le fonctionnement pour pouvoir éventuellement l'adapter à mon site.
Je suppute l'utilisation de Javascript pour faire tourner les images mais je pensais qu'insérer des codes JS entrainerait des conflits avec le système Jimdo. On a eu la confirmation que le site Jimdo tournait sous Jimdo donc ça doit être possible. Mon but est de trouver un slider que l'on pourrait développer en interne à un site Jimdo, sans devoir passer par des iframe et des services comme Archive-host.
Voici le code HTML de la chose :
- Code: Tout sélectionner
<div id="slider-container">
<div id="slideshow" style="position: relative; overflow: hidden;">
<div class="slide" id="slide-1" style="position: absolute; top: 0px; left: 179.5px; z-index: 7; opacity: 1; display: block; width: 990px; height: 348px;">
<div style="width: 990px; height: 348px;">
<h2>Facile et intuitif :</h2>
<p class="slidedesc">Un site pro sans connaissance informatique.</p>
</div>
</div>
<div class="slide" id="slide-2" style="position: absolute; top: 0px; left: -1349px; display: none; z-index: 6; opacity: 1; width: 990px; height: 348px;">
<div style="width: 990px; height: 348px;">
<h2>Tellement simple:</h2>
<p class="slidedesc">Même sans connaissance informatique.</p>
</div>
</div>
<div class="slide" id="slide-3" style="position: absolute; top: 0px; left: -1349px; display: none; z-index: 6; opacity: 1; width: 990px; height: 348px;">
<div style="width: 990px; height: 348px;">
<h2>Un grand choix de designs</h2>
<p class="slidedesc">Des modèles professionnels et variés.</p>
</div>
</div>
<div class="slide" id="slide-4" style="position: absolute; top: 0px; left: -1349px; display: none; z-index: 6; opacity: 1; width: 990px; height: 348px;">
<div style="width: 990px; height: 348px;">
<h2>Version mobile</h2>
<p class="slidedesc"> Design et e-boutique<br>optimisés.</p>
</div>
</div>
<div class="slide" id="slide-5" style="position: absolute; top: 0px; left: -1349px; display: none; z-index: 6; opacity: 1; width: 990px; height: 348px;">
<div style="width: 990px; height: 348px;">
<h2>L'e-commerce à portée de tous</h2>
<p class="slidedesc">Ouvrez votre boutique en ligne facilement.</p>
</div>
</div>
<div class="slide" id="slide-6" style="position: absolute; top: 0px; left: -1349px; display: none; z-index: 6; opacity: 1; width: 990px; height: 348px;">
<div style="width: 990px; height: 348px;">
<h2 class="last">Votre site internet<br>en quelques clics</h2>
<p class="slidedesc last">Inscrivez-vous gratuitement<br>dès maintenant</p>
</div>
</div>
</div>
</div>
Et le CSS :
- Code: Tout sélectionner
#slider-container {
bottom: 0;
left: -13px;
position: absolute;
width: 100%;
z-index: 1000;
}
div#slideshow {
height: 348px;
overflow: hidden;
width: 100%;
}
div#slideshow .slide {
display: none;
}
#slide-1 {
background: url("img/slide3.png") no-repeat scroll 0 0 transparent;
}
#slide-2 {
background: url("img/slide1.jpg") no-repeat scroll 0 0 transparent;
}
#slide-3 {
background: url("img/slide2.png") no-repeat scroll 0 0 transparent;
}
#slide-4 {
background: url("img/slide4.jpg") no-repeat scroll 0 0 transparent;
}
#slide-5 {
background: url("img/slide5.jpg") no-repeat scroll 0 0 transparent;
}
#slide-6 {
background: url("img/slide6.png") no-repeat scroll 0 0 transparent;
}
* html div#slide-1 {
background: none repeat scroll 0 0 transparent;
}
* html div#slide-2 {
background: none repeat scroll 0 0 transparent;
}
* html div#slide-3 {
background: none repeat scroll 0 0 transparent;
}
* html div#slide-4 {
background: none repeat scroll 0 0 transparent;
}
* html div#slide-5 {
background: none repeat scroll 0 0 transparent;
}
* html div#slide-6 {
background: none repeat scroll 0 0 transparent;
}
Il y a aussi un script JS derrière tout ça, mais je ne sais pas lequel. De plus, sur deux PCs différents, j'ai un slider qui s'affiche différemment, l'un avec une barre de navigation en bas et sur l'autre sans cette barre de navigation. Etrange.
Donc si on pouvait en faire une version plus simplifiée, ça pourrait être cool pour toute la communauté. Merci de votre aide !
. Voir