28172 sujets

CSS et mise en forme, CSS3

[Résolu] Slideshow CSS 3

Bonjour, j'aimerai réaliser un petit slideshow full width css3 mais j'ai un problème.

Quand je clique sur mes liens je change bien de div via le target. Mais j'ai une scroll bar horizontale que je souhaitais esquiver..

Voici l'apercu :

http://jsfiddle.net/SBs5K/8/

est-ce que quelqu'un aurait une idée ?

Merci d'avance. Smiley smile
Modifié par lutall (12 Apr 2012 - 18:02)
Lol merci du tuto mais ça à pas grand chose à voir, c'est pas du fullWith et ça utilise des transform.

Mais je vais essayer de voir si je peux merger les deux.
J'ai l'impression qu'un slideshow CSS Fulldwith c'est pas pour tout de suite, ou sinon je manque surement une étape.
J'aimerais savoir s'il est possible de gérer "l'historique de navigation" avec la méthode target. Je trouve insupportable d'un point de vue expérience utilisateur d'avoir à cliquer 10 fois sur précédent pour revenir à la page précédente. Le temps que tous les slides se rembobinent, ça réduit fortement l’intérêt d'un slideshow non ?
Ah ben justement, je trouve que c'est un plus par rapport au JS, c'est a dire qu'on peut gérer ça comme une navigation normale avec un changement de page.

Ca depend de l'utilité, dans mon but je trouve ça utile, dans le but d'un slider à photo c'est vrai que ça doit être gênant.

Après je ne pense pas qu'on puisse gérer ce système car c'est choisit par le concepteur de l'html d'utiliser l'ancre et les targets.

EDIT : En js je sais pas si on peut agir sur ça.

EDIT 2 : Une erreur dans mon graphique slide2=slide3 (logique...)
Modifié par lutall (13 Apr 2012 - 16:01)
Oui c'est vrai que je vois mal cette méthode sur un slideshow photos. En changeant de class à l'aide de Javascript on peut éviter les target je pense.

Sinon pour ton problème, as tu essayé de voir du côté de overflow: hidden ?
Tout ça n'est que question de display en fait.

Car appliquer margin-left de 100% a ma slide 2 grossis mon conteneur slides(qui contient tous les slides) de 100% donc avec les trois on arrive a 300%.

Je pensais pouvoir appliquer un max-width de 100% sur le mon conteneur de slides (#slides) mais apparement, max-width ne prend pas en compte les marges...

Donc au final ça sert à rien.

Il me faudrait un type de display qui capte que ce qui est visible, mais ça, c'est pas pour aujourd'hui...

EDIT : Sinon il me faudrait trouver une maniere de positionner en dehors du flux mes div (en gardant la même position) mais avec une propriété différente Smiley ohwell
Modifié par lutall (13 Apr 2012 - 17:18)
Bonjour,

un truc me surprend ... les liens vers les ancre mènent vers une balise vide de contenu en debut de page ? Sans CSS et sans ecran, la navigation est inefficace.
Personnellement, j'ai abandonné l'idée.

Je ne vois pas comment faire. Si certains veulent tenter, bonne chance, qu'ils le fassent savoir s'ils y arrivent.
Modifié par lutall (17 Apr 2012 - 16:08)
Je peut te proposer ceci (rapide test CSS + nav efficace même sans style).

L'effet de slide n'est pas un défilement de gauche a droite comme un classique JS.
C'est volontairement limiter, la feuille de style est génerique sans etre universel , elle s'applique a une structure type quelque soit le nombre d'element a "faire glisser".

test: 
<!DOCTYPE html>

<html lang="fr">
<head>
  <meta charset="UTF-8">

  <title>test slide CSS3</title>

  <style media="screen">

html, body, ul , h1 , p , div,li   {width:100%;margin:0;padding:0}
ul {text-align:center;position:fixed;z-index:3;background:white;height:2em;}
ul li {display:inline;}
#main-wrap {
width:100%;
position:absolute;
top:2em;
bottom:0;opacity:1;
}
#main-wrap #intro  {
position:static;
display:table;
text-align:center;
width:100%;
height:100%;
opacity:1;
}
#main-wrap #intro .cell {
position:static;
display:table-cell;
vertical-align:middle;
opacity:1;
background:black;
}

#main-wrap div {
width:100%;
margin-left:0;
position:fixed;
top:2em;
bottom:0;
left:100%;
top:100%;
overflow:auto;
text-align:auto;
}
/* serie de couleurs de fonds*/
#main-wrap   div:nth-child(1n)  {background:brown;}
#main-wrap   div:nth-child(2n)  {background:yellow;}
#main-wrap   div:nth-child(3n)  {background:gray;}
#main-wrap   div:nth-child(4n)  {background:lightblue;}
#main-wrap   div:nth-child(5n)  {background:red;}
#main-wrap   div:nth-child(6n)  {background:purple;}

/* mise en place du slide css3 */
#main-wrap   div:nth-child(odd) 					{left:-100%;	top:-100%;	bottom:100%;	-moz-transition: all 1s ease;transition: all 1s ease;z-index:1;opacity:0.25;}
#main-wrap   div:nth-child(even) 					{left:100%;		top:100%;	bottom:-100%;	-moz-transition: all 1s ease;transition: all 1s ease;z-index:1;opacity:0.25;}
#main-wrap   div:target    							{left:0;		top:2em;	bottom:0;		-moz-transition: all 1s ease;transition: all 1s ease;z-index:2;opacity:1;}








</style>

</head>
<body>
<ul>
<li><a href="#intro" title=""> intro </a></li>
<li><a href="#un" title=""> un </a></li>
<li><a href="#deux" title=""> deux </a></li>
<li><a href="#trois" title=""> trois </a></li>
<li><a href="#quatre" title=""> quatre </a></li>
<li><a href="#cinq" title=""> cinq </a></li>
<li><a href="#six" title=""> six </a></li>
<li><a href="#sept" title=""> sept </a></li>
</ul>

<div id="main-wrap">
<div id="intro">
	<div class="cell">
		<img src="http://lorempixel.com/980/100/" alt="osef" style="color:white;" />
	</div>
</div>

<div id="un">
<h1> un </h1>
<p>lorem ipsum et blabla bli blip !</p>
</div>

<div id="deux">
<h1>deux</h1>
<p>lorem ipsum et blabla bli blip !</p>
</div>

<div id="trois">
<h1>trois</h1>
<p>lorem ipsum et blabla bli blip !</p>
</div>

<div id="quatre">
<h1>quatre</h1>
<p>lorem ipsum et blabla bli blip !</p>
</div>

<div id="cinq">
<h1>cinq</h1>
<p>lorem ipsum et blabla bli blip !</p>
</div>

<div id="six">
<h1>six</h1>
<p>lorem ipsum et blabla bli blip !</p>
</div>

<div id="sept">
<h1>sept</h1>
<p>lorem ipsum et blabla bli blip !</p>
</div>


</div>
</body></html>
Bravo, c'est génial,

Mais j'aimerais savoir comment tu as fais pour positionner les divs ? Je comprends pas trop.

(je ne connais pas trop les odd/even)
bonsoir,

odd/even c'est pair et impair en anglais. Cela permet de cibler un élément sur deux par exemple.

Le positionnement des divs et un peu brutal.
fixed pour la liste.
absolute pour l'intro, avec du display:table pour centrer ton image.
les autres :fixed + z-index à l'extérieur de la zone d'affichage par défaut pour les faire glisser au dessus de l'intro.

Si le CSS ou les transitions ne sont pas prises en compte, le passage d'une zone à l'autre fonctionne quand même car la structure html est cohérente.(c’était ce qui me choquait un peu sur ton premier essai).

Enfin :target , lui ne passe pas sur les vieux navigateur.
Ce que tu souhaites faire au départ fonctionne bien avec un javascript.

est ce que la succinte explication suffit Smiley smile ?

Cordialement,
GC
Ah ben oui, merci beaucoup.

J'ai encore du chemin a parcourir pour arriver à ces raisonnements.

Le display table je ne l'utilise jamais et la propriété z-index aussi.

Merci pour cette aide Smiley smile
lutall a écrit :
Ah ben oui, merci beaucoup.

J'ai encore du chemin a parcourir pour arriver à ces raisonnements.

Le display table je ne l'utilise jamais et la propriété z-index aussi.

Merci pour cette aide Smiley smile
Sujet clos
Aller à