Div en ligne pour réaliser un slideshow

**edouard.danaradjou** · 03/09/2014, 11h43

Bonjour à tous,

Je sollicite la communauté car je tourne en rond sur la résolution de mon pb malgré les différents posts déjà ouverts !

Le contexte :
Je souhaite mettre en place un "slideshow horizontal" sur la totalité de la hauteur de mon écran.
C'est à dire que je souhaiterai avoir des éléments mis bout à bout sur la droite (div, li ou autre). L'overflow-x est caché, le passage à une slide se fera avec des boutons ou des liens (<< et >>) qui décaleront à droite ou à gauche d'une largeur d'écran.

A NOTER que j'utilise le "script CSS de reset" d'Eric MEYER.

Voici mon code CSS défectueux :

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
 
body {
	font-family: "Ms Trebuchet", Helvetica, Verdana, Arial, Sans serif;
	font-size: 17pt;
}
 
/**
 * Conteneur de slides
 */
div#slideshow {
	display:inline;
}
 
/**
 * Slide = une DIV de la taille exacte de l'ecran
 */
.slide {
	display:inline;
}

le code HTML :

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
 
...
<body>
 
	<!-- Je souhaiterai que la div ci dessous contient en ligne toutes les div sous jacentes -->
	<div id="slideshow">
		<div class="slide">Slide 1 adaptée à l ecran</div>
		<div class="slide">Slide 2 adaptée à l ecran</div>
		<div class="slide">Slide 3 adaptée à l ecran</div>
		<div class="slide">Slide 4 adaptée à l ecran</div>
		<div class="slide">Slide 5 adaptée à l ecran</div>
	</div>
 
</body>
...

Avec le code JS de redimensionnement dynamique :

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
 
function adpaterALaTailleDeLaFenetre(){
	var largeur = document.documentElement.clientWidth,
	hauteur = document.documentElement.clientHeight;
 
	var largeur_slideshow =  parseInt(largeur*3)
 
	//$("ul#slideshow").css("height", hauteur+'px', "width", largeur+'px');
	$("div#slideshow").css("height", hauteur+'px');
	$("div.slide").css("height", hauteur+'px', "width", largeur+'px');
 
}
 
// Une fonction de compatibilité pour gérer les évènements
function addEvent(element, type, listener){
	if (element.addEventListener){
		element.addEventListener(type, listener, false);
	} else if (element.attachEvent){
		element.attachEvent("on"+type, listener);
	}
}
 
// On exécute la fonction une première fois au chargement de la page
addEvent(window, "load", adpaterALaTailleDeLaFenetre);
// Puis à chaque fois que la fenêtre est redimensionnée
addEvent(window, "resize", adpaterALaTailleDeLaFenetre);

**s0h3ck** · 03/09/2014, 13h36

Je crois que votre question aurait mille solutions dans le FORUM JS.

Je vous envoie tout de même quelques liens pour commencer l'expérimentation par vous-même :

Bonne continuité!

Div en ligne pour réaliser un slideshow

Tableau en CSS

Discussions similaires

Partager

Partager