28112 sujets

CSS et mise en forme, CSS3

Slideshow responsive (besoin d'aide pour autoplay)

Bonjour à tous !
Alors voila, j'ai codé mon slideshow visible ici :

http://codepen.io/xamalekoum/pen/KWavwZ

J'aurais besoin de votre aide, j'ai réussi a lui donné un défilement automatique grâce a un Keyframes en CSS. Sauf que quand je l'ajoute, je n'ai plus accès à la navigation manuelle des <input> et boutons suivant , précédent.

J'aimerais évité le javascript, l'animation dois être la suivante:

- Défilement automatique des images
- Puces de navigation (<input>) qui suivent en fonction de l'image visionner

Sa fait des jours que je travail la dessus, notamment pour le rendre responsive, mais la je sèche.

Merci d'avance pour votre aide ! Smiley biggrin
Modifié par xamalekoum (09 Mar 2017 - 16:34)
Modérateur
Salut,

Je t'ai vu crier à l'aide.... Dans le codePen il n'y a pas le défilement auto c'est normal ? Si tu pouvais l'ajouter que l'on voit un peu ce qui coince... merci Smiley smile
Modérateur
Au dela de ça... rien qu'au niveau théorie ca va etre compliqué je pense... tu utilises l’état checked des inputs mais faire un défilement auto en CSS ne pourra pas influer sur l'état des inputs.... tu ne pourras pas changer l'état des inputs via le CSS (ou alors seulement visuellement, leur donner une aspect checked/unchecked malgrès la réalité)
Je m'en doutais un peu en fait Smiley ohwell

Je t'envois ici mon keyframes pour que tu constate le probleme sur codepen.Ajoute le au CSS du .slider. 


@keyframes slider
 {
	0%, 20%, 100%	{ left: 0 }
	25%, 45%		{ left: -100% }
	50%, 70%		{ left: -200% }
	75%, 95%		{ left: -300% }
}


animation: slider 32s infinite;


Je le laisse intacte sur codepen car d'autre personne sont surement dessus.
Du coup je pense que la solution serait du java...mais je suis une quiche en java ahah

Merci de ta réponse, j'aurais penser en avoir un hier mais tu est le premier !
Modifié par xamalekoum (10 Mar 2017 - 14:53)
Modérateur
Je n'ai pas ta solution par contre ça a activé ma mémoire !!! J'avais suivi un tuto creativejuiz sur un Slider full CSS il me semble que c'était celui là :

https://www.creativejuiz.fr/blog/tutoriels/css3-creer-slideshow-automatique-controlable-transition

Depuis le temps il l'a peut être mis à jour mais en tout cas l'exemple à l'air de contenir tout ce que tu désires !
Tu devrais suivre le tuto de bout en bout (en sautant les partie que tu ne veut pas comme la ligne du temps ou le bouton play/pause) et soit reprendre tout ton code soit le corriger si c'est adaptable.

Smiley smile
Modifié par _laurent (10 Mar 2017 - 15:45)
Modérateur
Bonjour,

Devancé par _laurent, je cherchais à remettre la main sur le tutoriel que j'avais suivis pour cet exercice.

Il vous a fournit ici ce qui me semble être un des, si ce n'est le, plus bel exemple à suivre.

Bonne journée.
Modérateur
Greg_Lumiere a écrit :
je cherchais à remettre la main sur le tutoriel que j'avais suivis pour cet exercice.
Il vous a fournit ici ce qui me semble être un des, si ce n'est le, plus bel exemple à suivre.

Hahaha on a tous suivi le même ?! Smiley lol
C'est clair qu'il était bien complet et bien expliqué de souvenir !
Re, je connais ce tuto, malheureusement il n'est pas responsive ^^.

J'ai essayé de l'adapté des dizaines de fois, sans succès.

En attendant d'autres lumière je vais essayé de combiné le miens et celui ci voir si je peux pas me sortir de cette embuscade.

Merci pour vos réponses !
Modérateur
xamalekoum a écrit :
Re, je connais ce tuto, malheureusement il n'est pas responsive ^^.

J'ai essayé de l'adapté des dizaines de fois, sans succès.
Même en convertissant les unités absolues en relatives ?

Ca ne me paraît pourtant pas bien sorcier. Unités relatives + media queries c'est la garantie d'un rendu adaptatif.

Je vous propose de tenter l'expérience sur un nouveau pen en suivant scrupuleusement le tutoriel puis en effectuant les modifications requises pour le rendre adaptatif. Je suis persuadé qu'à nous tous nous trouverons une manière d'y arriver.

Dans tous les cas, en l'état avec des éléments de formulaire ça me paraît irréalisable (pour la raison évoquée par _laurent).


_laurent a écrit :
C'est clair qu'il était bien complet et bien expliqué de souvenir !
Pour appréhender les techniques, Creative Juive est un pur régal.


PS: afin de répondre au critères d'accessibilité, je pense qu'il faille maintenir le bouton de mise en pause. Les animations peuvent provoquer des désagréments aux personnes sensibles. D'ailleurs il est fortement recommandé de ne pas utiliser d'animation automatique mais de laisser l'activation au loisir de l'utilisateur. Donc notion à appréhender avec prudence (et à bien temporiser).
Bonjour Greg.

En lisant un peu plus attentivement le tuto, je viens de comprendre qu'il duplique les images, une pour le fonctionnement manuel, l'autre pour l'automatique.

Je pense que mon problème dois venir de la.

Sinon, je devrais passer toutes les position absolute en relative c'est sa?


J'essai de le modifier a ma sauce, sauf que, j'aimerais mettre n'importe quel taille d'images dedans et qu'elle rentre parfaitement dans le cadre du slider, avec le miens sa marche impeccable, mais pas celui du tuto de creativejuiz.

pom pom pom... c'est lourd, pas moyen d'avoir un slideshow responsive qui prend mes images a 100%...

Par la grâce de dieu, le javascript ne pourrait il pas "simuler" un clic sur le bouton suivant ou animé mon slideshow et les puces de navigation ?
Modifié par xamalekoum (11 Mar 2017 - 03:09)
Paix
Louange à Dieu, l'Audient, l'Omnicient
Bonjour à tous Smiley smile ,

Après avoir fouiller un peu sur la toile je suis tombé sur ce forum et plus précisément sur ce topic alors que je recherchais moi aussi des infos sur un slideshow animé contrôlable et responsive.

Alors après avoir dis ça je remarque que beaucoup d'entre nous penche sur le même sujet.
Geoffrey Crofte fondateur de Creative Juiz à rédiger un tuto quasi complet concernant le slideshow animé et contrôlable.https://www.creativejuiz.fr/blog/tutoriels/css3-creer-slideshow-automatique-controlable-transition cela a été rappelé plusieurs fois.
Mais c'est un très gros travail je tiens à le souligner !
Et Ian Hansson à créé le sien avec un format responsive. http://csscience.com/responsiveslidercss3/nojs.html

Alors ce que tout le monde aimerais avoir, c'est une combinaison de ces deux types de slideshow, et c'est ce sur ça que je travail actuellement... il reste encore des choses à retravailler dessus mais je voulais également partager avec vous le résultat de mon travail réaliser par cette tentative de combiner les deux.
Modestement je tiens à préciser que je suis loin d'être un expert voir même un pro et que je ne suis pas certain de revenir sur ce forum. (je me suis inscris juste pour répondre ici).

Voici le code html :

<section id="extra-slideshow-container">

	<span id="sl_play" class="sl_command"></span>
	<span id="sl_pause" class="sl_command"></span>

	<span id="sl_i1" class="sl_command sl_i"></span>
	<span id="sl_i2" class="sl_command sl_i"></span>
	<span id="sl_i3" class="sl_command sl_i"></span>
	<span id="sl_i4" class="sl_command sl_i"></span>
	<span id="sl_i5" class="sl_command sl_i"></span>

	<div id="slideshow-container">

		<a class="play_commands pause" href="#sl_pause" title="Met en pause">Pause</a>
		<a class="play_commands play" href="#sl_play" title="Lance l'animation">Play</a>

		<a class="commands prev commands1" href="#sl_i5" title="Aller à la dernière image">&lt;</a>
		<a class="commands next commands1" href="#sl_i2" title="Aller à la 2ème image">&gt;</a>
		<a class="commands prev commands2" href="#sl_i1" title="Aller à la 1ère image">&lt;</a>
		<a class="commands next commands2" href="#sl_i3" title="Aller à la 3ème image">&gt;</a>
		<a class="commands prev commands3" href="#sl_i2" title="Aller à la 2ème image">&lt;</a>
		<a class="commands next commands3" href="#sl_i4" title="Aller à la 4ème image">&gt;</a>
		<a class="commands prev commands4" href="#sl_i3" title="Aller à la 3ème image">&lt;</a>
		<a class="commands next commands4" href="#sl_i5" title="Aller à la 5ème image">&gt;</a>
		<a class="commands prev commands5" href="#sl_i4" title="Aller à la 4ème image">&lt;</a>
		<a class="commands next commands5" href="#sl_i1" title="Aller à la première image">&gt;</a>
		<article class="article-slideshow">
			<div class="c_slider"></div>
			<header class="header-slider"><!--
			 --><figure class="figure-slide"><!-- Content image 1 of slider -->
					<img src="img/diapo/img2-2560_1536.jpg" alt="Image 1" />
					<figcaption>n°1 Une rue quelconque dans le département 91</figcaption>
				</figure><!--
			 --><figure class="figure-slide"><!-- Content image 2 of slider -->
					<img src="img/diapo/img4-2560_1536.jpg" alt="Image 2" />
					<figcaption>n°2 Quelques pas plus loin</figcaption>
				</figure><!--
			 --><figure class="figure-slide"><!-- Content image 3 of slider -->
					<img src="img/diapo/img13-2560_1536.jpg" alt="Image 3" />
					<figcaption>n°3 Quelques rues plus loin</figcaption>
				</figure><!--
			 --><figure class="figure-slide"><!-- Content image 4 of slider -->
					<img src="img/diapo/img6-2560_1536.jpg" alt="Image 4" />
					<figcaption>n°4 Vue de quelques mêtres plus loin</figcaption>
				</figure><!--
			 --><figure class="figure-slide"><!-- Content image 5 of slider -->
					<img src="img/diapo/img14-2560_1536.jpg" alt="Image 5" />
					<figcaption>n°5 Proche d'une zone de regroupement industriel</figcaption>
				</figure>
			</header><!-- .header-slider -->
		<span id="timeline"></span>
		</article><!-- .article-slideshow -->


		<ul class="dots_commands"><!--
		--><li><a title="Afficher l'image" href="#sl_i1">Image 1</a></li><!--
		--><li><a title="Afficher l'image 2" href="#sl_i2">Image 2</a></li><!--
		--><li><a title="Afficher l'image 3" href="#sl_i3">Image 3</a></li><!--
		--><li><a title="Afficher l'image 4" href="#sl_i4">Image 4</a></li><!--
		--><li><a title="Afficher l'image 5" href="#sl_i5">Image 5</a></li><!--
	--></ul>

	</div><!-- fin #slideshow-container -->

</section><!-- fin #extra-slideshow-container -->


Et voici le code css (!warning -> 619 ligne Smiley biggol ):

* {
	margin: 0 auto;
	padding: 0;
	text-decoration: none;
	list-style-type: none;
}
#extra-slideshow-container {
	display: block;
	width: 100%;
	margin: 0; padding: 0;
	background: #262626;
}
/* On réalise l'écran */
#slideshow-container {
	position: relative;
	display: block;
	width: 90%;
	margin: 0 auto; padding: 1.5%;
	border: 1px solid #323232;
	background: #3e3e3e;
	background: -webkit-linear-gradient(#535353, #535353 20%, #3e3e3e 80%, #232323);
	background: -moz-linear-gradient(#535353, #535353 20%, #3e3e3e 80%, #232323);
	background: -o-linear-gradient(#535353, #535353 20%, #3e3e3e 80%, #232323);
	background: linear-gradient(#535353, #535353 20%, #3e3e3e 80%, #232323);
	-webkit-border-radius: 7px 7px 3px 3px;
	-moz-border-radius: 7px 7px 3px 3px;
	border-radius: 7px 7px 3px 3px;
	-webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.2), 0 8px 8px 0 rgba(0, 0, 0, 0.2), 0 12px 20px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 0 3px rgba(0,0,0, 0.2), 0 8px 8px 0 rgba(0, 0, 0, 0.2), 0 12px 20px 0 rgba(0, 0, 0, 0.19);
	box-shadow: 0 0 3px rgba(0,0,0, 0.2), 0 8px 8px 0 rgba(0, 0, 0, 0.2), 0 12px 20px 0 rgba(0, 0, 0, 0.19);
}
/* gestion des dimensions et débordement du conteneur */
.article-slideshow {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
}
/* on prévoit un petit espace gris pour la timeline */
.article-slideshow:after {
	position:absolute;
	top: 0; left:0;
	content: ' ';
	width: 100%;
	height: 2px;
	background: #333;
	background: rgba(0,0,0, 0.5);
	z-index: 3;
}
/* Conteneur de toutes les figures */
.header-slider {
	width: 500%;
	-webkit-animation: slider 32s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
	-moz-animation: slider 32s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
	-o-animation: slider 32s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
	animation: slider 32s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
}
/*--------------------------------*\
	Contruction des annimations
\*--------------------------------*/
/* Annimation de notre conteneur d'images de legendes */
@-webkit-keyframes slider {
	0%, 10%, 100%	{ margin-left:0; }
	15%, 30%		{ margin-left:-100%; }
	35%, 50%		{ margin-left:-200%; }
	55%, 70%		{ margin-left:-300%; }
	75%, 90%		{ margin-left:-400%; }
}
@-moz-keyframes slider {
	0%, 10%, 100%	{ margin-left:0; }
	15%, 30%		{ margin-left:-100%; }
	35%, 50%		{ margin-left:-200%; }
	55%, 70%		{ margin-left:-300%; }
	75%, 90%		{ margin-left:-400%; }
}
@keyframes slider {
	0%, 10%, 100%	{ margin-left:0; }
	15%, 30%		{ margin-left:-100%; }
	35%, 50%		{ margin-left:-200%; }
	55%, 70%		{ margin-left:-300%; }
	75%, 90%		{ margin-left:-400%; }
}
/* 1 figure = 1/5ème du conteneur */
.figure-slide {
	position: relative;
	display: inline-block;
	width: 20%;
	float: left;
}
/* petit effet de vignette sur les images */
.figure-slide:after {
	position: absolute;
	display:block;
	content: " ";
	top:0; left:0;
	width: 100%; height: 100%;
	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
}/* Taille des images pour un code responsive */
.figure-slide img {
	width: 100%;
}
/* styles de nos légendes */
#slideshow-container figcaption {
	position:absolute;
	left:0; right:0; bottom: 0;
	padding: 3%;
	border-top: 1px solid rgba(51, 51, 51, .7);
	text-align: center;
	letter-spacing: 0.05em;
	word-spacing: 0.05em;
	font-size: .905em;
	font-family: Georgia, Times, serif;
	background: #3e3e3e;
	background: rgba(51, 51, 51, .7);
	color: deepskyblue;
	-moz-text-shadow: -1px -1px 0 rgba(51, 51, 51, .3);
	text-shadow: -1px -1px 0 rgba(51, 51, 51, .3);

	-webkit-animation: figcaptionner 32s ease infinite;
	-moz-animation: figcaptionner 32s ease infinite;
	-o-animation: figcaptionner 32s ease infinite;
	animation: figcaptionner 32s ease infinite;
}
/* L'Annimation de la légende */
@-webkit-keyframes figcaptionner {
	0%, 15%, 35%, 55%, 75%, 100%						{ bottom: -16.53%; }
	5%, 10%, 25%, 30%, 45%, 50%, 65%, 70%, 85%, 90%		{ bottom: .5%;}
}
@-moz-keyframes figcaptionner {
	0%, 15%, 35%, 55%, 75%, 100%						{ bottom: -16.53%; }
	5%, 10%, 25%, 30%, 45%, 50%, 65%, 70%, 85%, 90%		{ bottom: .5%;}
}
@keyframes figcaptionner {
	0%, 15%, 35%, 55%, 75%, 100%						{ bottom: -16.53%; }
	5%, 10%, 25%, 30%, 45%, 50%, 65%, 70%, 85%, 90%		{ bottom: .5%;}
}
/* Animation de la ligne de temps */
#timeline {
	position: absolute; /* Absolue par rapport à son parent relatif c-a-d: .slideshow-content:after*/
	background: deepskyblue; /*	Propriété par défaut si le navigateur ne prend pas en charge les autres couleurs */
	left: 0; top: 0; /* bottom valeur a modifier*/
	width: 0; /* qui s'agrandira jusqu'a 100% durant l'annimation*/
	height: 2px;
	background: rgb(0, 191, 255);
	background: rgba(0, 191, 255, .8);
	overflow: visible;

	-webkit-animation: timeliner 32s ease-in-out infinite;
	-moz-animation: timeliner 32s ease-in-out infinite;
	-o-animation: timeliner 32s ease-in-out infinite;
	animation: timeliner 32s ease-in-out infinite;
	z-index: 4;
}
/* L'Annimation de la timeline */
@-webkit-keyframes timeliner {
	0%, 15%, 35%, 55%, 75%, 100%	{ width: 0; }
	10%, 30%, 50%, 70%, 90%			{ width: 100%; }
}
@-moz-keyframes timeliner {
	0%, 15%, 35%, 55%, 75%, 100%	{ width: 0; }
	10%, 30%, 50%, 70%, 90%			{ width: 100%; }
}
@keyframes timeliner {
	0%, 15%, 35%, 55%, 75%, 100%	{ width: 0; }
	10%, 30%, 50%, 70%, 90%			{ width: 100%; }
}
/*---------------------------*\
	Style et placement Des
	Commandes et des liens
		play et pause
\*---------------------------*/
.play_commands {
/*	positionnement en haut à droite de notre conteneur */
	position: absolute;
	top: 9%; right: 4%;
	z-index: 10;
/*	dimensionnement des icônes	*/
	width: 44px;
	height: 44px;
	text-indent: -9999px;
	border: 0 none;
/*	On place l'opacité à 1 si on souhaite voir les commandes */
	opacity: 0;
/*	Préparation de transition sur l'opacity et right */
	-webkit-transition: opacity 1s, right 1s;
	-moz-transition: opacity 1s, right 1s;
	-o-transition: opacity 1s, right 1s;
	transition: opacity 1s, right 1s;
}
/* On décale play légèrement sur la gauche */
.play { right: 10%; cursor: default;}
/* Création de l'icône pause avec 2 pseudos éléments */
.pause:before,
.pause:after {
	position: absolute;
	content: ' ';
	top: 0;
	width: 38%;
	height: 44px;
	background: deepskyblue;
	background: rgba(0, 191, 255, .7);
}
.pause:before { left: -20px; }
.pause:after { right: 16px; }
/* Création de l'icône play avec des bordures */
.play {
	width: 1px;
	height: 1px;
/* Les transparentes forment la flèche */
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 40px solid deepskyblue;
	border-left: 40px solid rgba(0, 191, 255, .7);
/* En plaçant à 1 l'opacity on affiche l'icône pour le voir de suite */
	opacity: 0;
}
/* Apparition du bouton pause au survole */
/* Apparation des boutons au focus */
#slideshow-container:hover .pause,
.play_commands:focus {
	opacity: 1;
	outline: none;
}
/*-------------------------*\
	Partie fonctionnelle
\*-------------------------*/
/* stopper les animations : toutes les commandes stoperons l'annimation */
#sl_pause:target ~ #slideshow-container .article-slideshow .header-slider,
#sl_pause:target ~ #slideshow-container .article-slideshow figcaption,
#sl_pause:target ~ #slideshow-container .article-slideshow #timeline,
#sl_pause:target ~ #slideshow-container .dots_commands li:first-child a:after,
#sl_i1:target ~ #slideshow-container .article-slideshow .header-slider,
#sl_i1:target ~ #slideshow-container .article-slideshow figcaption,
#sl_i1:target ~ #slideshow-container .article-slideshow #timeline,
#sl_i1:target ~ #slideshow-container .dots_commands li:first-child a:after,
#sl_i2:target ~ #slideshow-container .article-slideshow .header-slider,
#sl_i2:target ~ #slideshow-container .article-slideshow figcaption,
#sl_i2:target ~ #slideshow-container .article-slideshow #timeline,
#sl_i2:target ~ #slideshow-container .dots_commands li:first-child a:after,
#sl_i3:target ~ #slideshow-container .article-slideshow .header-slider,
#sl_i3:target ~ #slideshow-container .article-slideshow figcaption,
#sl_i3:target ~ #slideshow-container .article-slideshow #timeline,
#sl_i3:target ~ #slideshow-container .dots_commands li:first-child a:after,
#sl_i4:target ~ #slideshow-container .article-slideshow .header-slider,
#sl_i4:target ~ #slideshow-container .article-slideshow figcaption,
#sl_i4:target ~ #slideshow-container .article-slideshow #timeline,
#sl_i4:target ~ #slideshow-container .dots_commands li:first-child a:after,
#sl_i5:target ~ #slideshow-container .article-slideshow .header-slider,
#sl_i5:target ~ #slideshow-container .article-slideshow figcaption,
#sl_i5:target ~ #slideshow-container .article-slideshow #timeline,
#sl_i5:target ~ #slideshow-container .dots_commands li:first-child a:after,
.sl_command:target ~ #slideshow-container .article-slideshow .header-slider,
.sl_command:target ~ #slideshow-container .article-slideshow figcaption,
.sl_command:target ~ #slideshow-container .article-slideshow #timeline,
.sl_command:target ~ #slideshow-container .article-slideshow .dots_commands li:first-child a:after {
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	-o-animation-play-state: paused;
	animation-play-state: paused;
}
/* redémarrer les animations : seul le bouton play permettra de redémarrer */
#sl_play:target ~ #slideshow-container .header-slider,
#sl_play:target ~ #slideshow-container .article-slideshow figcaption,
#sl_play:target ~ #slideshow-container .article-slideshow #timeline,
#sl_play:target ~ #slideshow-container .dots_commands li:first-child a:after {
	-webkit-animation-play-state: running;
	-moz-animation-play-state: running;
	-o-animation-play-state: running;
	animation-play-state: running;
}
/* switch entre les boutons */
.sl_command:target ~ #slideshow-container .pause 		{ opacity:0; }
#sl_play:target ~ #slideshow-container:hover .pause,
#sl_play:target ~ #slideshow-container .pause:focus 	{ opacity:1; }
.sl_command:target ~ #slideshow-container .play 		{ opacity:1; right: 4.5%; cursor: pointer; }
#sl_play:target ~ #slideshow-container .play 			{ opacity:0; right: -.5%; cursor: default; }
/*---------------------------------------------*\
*************************************************
	Les flèches « suivant » et « précédent »
*************************************************
\*---------------------------------------------*/
/* stylisation des boutons & affiche/cache les boutons utile/inutile */
#slideshow-container .commands {
	position: absolute;
	top: 45%;
	padding: 1% 2%;
	font-size: 130%;
	color: deepskyblue;
	text-decoration:none;
	background-color: #333;

	-webkit-background-image: linear-gradient(#535353,#333);
	-moz-background-image: linear-gradient(#535353,#333);
	-o-background-image: linear-gradient(#535353,#333);
	background-image: linear-gradient(#535353,#333);

	text-shadow: 0 0 1px #aaa;
	border-top: 1px solid #363636;
	border-bottom: 1px solid #262626;

	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	z-index: 1;
}
/* un style au hover des boutons/liens "Précédent" & "Suivant" allias '<' & '>'*/
#slideshow-container .prev { left: 0; -webkit-border-radius: 0 50% 50% 0; -moz-border-radius: 0 50% 50% 0; border-radius: 0 50% 50% 0; }
#slideshow-container .next { right: 0; -webkit-border-radius: 50% 0 0 50%; -moz-border-radius: 50% 0 0 50%; border-radius: 50% 0 0 50%; }
#slideshow-container .prev,
#slideshow-container .next { opacity: .3; transition: 1s; }
#slideshow-container .prev:hover,
#slideshow-container .next:hover { opacity: .95;}
#slideshow-container .commands { display:none; }
#slideshow-container .commands1 { display: block; }
/* Voir pour les commandes ligne 340+ */
#slideshow-container .c_slider {
	position: absolute;
	left:0; top:0;
	width: 500%;
	height: 99%;
	/* multiple background */
	background: url(../img/diapo/img2-2560_1536.jpg) 0% 0 no-repeat,
	            url(../img/diapo/img4-2560_1536.jpg) 100% 0 no-repeat,
	            url(../img/diapo/img13-2560_1536.jpg) 200% 0 no-repeat,
	            url(../img/diapo/img6-2560_1536.jpg) 300% 0 no-repeat,
	            url(../img/diapo/img14-2560_1536.jpg) 400% 0 no-repeat;
	-webkit-transition: background 1s;
	-moz-transition: background 1s;
	-o-transition: background 1s;
	transition: background 1s;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	background-size: contain; /* !important Permet le redimentionnement des images sur le contenneur c_slider */
}
/*-----------------------------------------------------------------------------*\
*********************************************************************************
	Controle par commande cl_i(x) et dots_commands &commands(x) C'est partit !!
*********************************************************************************
\*-----------------------------------------------------------------------------*/
/* On cache le header-slider */
.sl_i:target ~ #slideshow-container .header-slider,
.sl_i:target ~ #slideshow-container .header-slider figcaption,
.sl_i:target ~ #slideshow-container .article-slideshow:after,
.sl_i:target ~ #slideshow-container #timeline 							{ visibility: hidden; }
/* On place la 1ère pastille */
.sl_i:target ~ #slideshow-container .dots_commands li:first-child a:after 	{ display: none; }
/* Pour afficher la 2ème pastille */
.sl_i:target ~ #slideshow-container .dots_commands li:first-child a:before 	{ display: block; }
/* Si on cible le premier header-slider on cache tous les 'précédent' et 'suivant' */
#sl_i1:target ~ #slideshow-container .commands,
#sl_i2:target ~ #slideshow-container .commands,
#sl_i3:target ~ #slideshow-container .commands,
#sl_i4:target ~ #slideshow-container .commands,
#sl_i5:target ~ #slideshow-container .commands 	{ display: none; }
/* On affiche seulement deux flèches quand on cible #sl_i[x]:target*/
#sl_i1:target ~ #slideshow-container .commands1,
#sl_i2:target ~ #slideshow-container .commands2,
#sl_i3:target ~ #slideshow-container .commands3,
#sl_i4:target ~ #slideshow-container .commands4,
#sl_i5:target ~ #slideshow-container .commands5 { display: block; }
/* Correspond au décalage des images */
#sl_i1:target ~ #slideshow-container .c_slider 	{ background-position: 0 0, 100% 0, 200% 0, 300% 0, 400% 0; }
#sl_i2:target ~ #slideshow-container .c_slider 	{ background-position: -100% 0, 0 0, 100% 0, 200% 0, 300% 0; }
#sl_i3:target ~ #slideshow-container .c_slider 	{ background-position: -200% 0, -100% 0, 0 0, 100% 0, 200% 0; }
#sl_i4:target ~ #slideshow-container .c_slider 	{ background-position: -300% 0, -200% 0, -100% 0, 0 0, 100% 0; }
#sl_i5:target ~ #slideshow-container .c_slider 	{ background-position: -400% 0, -300% 0, -200% 0, -100% 0, 0 0; }
/* On place la pastille tout à gauche */
#sl_i1:target ~ #slideshow-container .dots_commands li:first-child a:before 	{ left: 0; }
#sl_i2:target ~ #slideshow-container .dots_commands li:first-child a:before 	{ left: 39px; }
#sl_i3:target ~ #slideshow-container .dots_commands li:first-child a:before 	{ left: 78px; }
#sl_i4:target ~ #slideshow-container .dots_commands li:first-child a:before 	{ left: 117px; }
#sl_i5:target ~ #slideshow-container .dots_commands li:first-child a:before 	{ left: 156px; }
/*-----------------------------------------------------------------*\
*********************************************************************
	Configuration de nos petits points au pied de notre slideshow
*********************************************************************
\*-----------------------------------------------------------------*/
.dots_commands  {
	padding: 0;
	margin: 5px 0 0;
	text-align: center;
}
.dots_commands li {
	display: inline;
	margin: 0; padding: 0;
}
.dots_commands a {
	position: relative;
	display: inline-block;
	height:15px; width: 15px;
	margin: 0 10px;
	text-indent: -9999px;
	background: #333;
	border: 2px solid #363636;

	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;

	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
	box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
}
/* quelques styles au focus */
.dots_commands a:focus { 
	outline: none;
	background: deepskyblue;
}
.dots_commands li:first-child a { z-index: 25; }

/* on style after et before, on utilisera les deux */
.dots_commands li:first-child a:after,
.dots_commands li:first-child a:before {
	position: absolute;
	top: 0; left: 0;
	content: ' ';
	width: 15px; height: 15px;
	background: deepskyblue;
	z-index:20;

	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;

	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
	box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
}
/* on anime "after" */
.dots_commands li:first-child a:after {
	-webkit-animation: dotser 32s ease-out infinite;
	-moz-animation: dotser 32s ease-out infinite;
	-o-animation: dotser 32s ease-out infinite;
	animation: dotser 32s ease-out infinite;
}
/* on cache "before", on l'utilise uniquement au clic Voir ligne 50 ~ 80 */
.dots_commands li:first-child a:before { display:none; }
/*	L'Annimation de la légende  */
@-webkit-keyframes dotser {
	0%, 100% 	{ opacity: 1; left: 0; 		}
 		
	10%			{ opacity: 1; left: 0;		}
	12%			{ opacity: 0; left: 0;		}
	13%			{ opacity: 0; left: 39px;	}
	15%			{ opacity: 1; left: 39px;	}
 		
	30%			{ opacity: 1; left: 39px;	}
	32%			{ opacity: 0; left: 39px;	}
	33%			{ opacity: 0; left: 78px;	}
	35%			{ opacity: 1; left: 78px;	}
 		
	50%			{ opacity: 1; left: 78px;	}
	52%			{ opacity: 0; left: 78px;	}
	53%			{ opacity: 0; left: 117px;	}
	55%			{ opacity: 1; left: 117px;	}

	70%			{ opacity: 1; left: 117px;	}
	72%			{ opacity: 0; left: 117px;	}
	73%			{ opacity: 0; left: 156px;	}
	75%			{ opacity: 1; left: 156px;	}
 		
	90%			{ opacity: 1; left: 156px;	}
	95%			{ opacity: 0; left: 156px;	}
	98%			{ opacity: 0; left: 0;	}
}
@-moz-keyframes dotser {
	0%, 100% 	{ opacity: 1; left: 0; 		}
 		
	10%			{ opacity: 1; left: 0;		}
	12%			{ opacity: 0; left: 0;		}
	13%			{ opacity: 0; left: 39px;	}
	15%			{ opacity: 1; left: 39px;	}
 		
	30%			{ opacity: 1; left: 39px;	}
	32%			{ opacity: 0; left: 39px;	}
	33%			{ opacity: 0; left: 78px;	}
	35%			{ opacity: 1; left: 78px;	}
 		
	50%			{ opacity: 1; left: 78px;	}
	52%			{ opacity: 0; left: 78px;	}
	53%			{ opacity: 0; left: 117px;	}
	55%			{ opacity: 1; left: 117px;	}

	70%			{ opacity: 1; left: 117px;	}
	72%			{ opacity: 0; left: 117px;	}
	73%			{ opacity: 0; left: 156px;	}
	75%			{ opacity: 1; left: 156px;	}
 		
	90%			{ opacity: 1; left: 156px;	}
	95%			{ opacity: 0; left: 156px;	}
	98%			{ opacity: 0; left: 0;	}
}
@keyframes dotser {
	0%, 100% 	{ opacity: 1; left: 0; 		}
 		
	10%			{ opacity: 1; left: 0;		}
	12%			{ opacity: 0; left: 0;		}
	13%			{ opacity: 0; left: 39px;	}
	15%			{ opacity: 1; left: 39px;	}
 		
	30%			{ opacity: 1; left: 39px;	}
	32%			{ opacity: 0; left: 39px;	}
	33%			{ opacity: 0; left: 78px;	}
	35%			{ opacity: 1; left: 78px;	}
 		
	50%			{ opacity: 1; left: 78px;	}
	52%			{ opacity: 0; left: 78px;	}
	53%			{ opacity: 0; left: 117px;	}
	55%			{ opacity: 1; left: 117px;	}

	70%			{ opacity: 1; left: 117px;	}
	72%			{ opacity: 0; left: 117px;	}
	73%			{ opacity: 0; left: 156px;	}
	75%			{ opacity: 1; left: 156px;	}
 		
	90%			{ opacity: 1; left: 156px;	}
	95%			{ opacity: 0; left: 156px;	}
	98%			{ opacity: 0; left: 0;	}
}
/****************\
	Ecran ordi
\****************/
@media only screen and (max-width: 1250px) and (min-width: 850px) {

	.figure-slide img {
		width: 100%;
	}
	.play_commands {
		top: 7%; right: 3%;
		width: 22px;
		height: 22px;
	}
	.play { right: 9%; }
	.pause:before,
	.pause:after { width: 55%; height: 30px; }
	.pause:before { left: -10px; }
	.pause:after { right: 0; }
	.play {
	width: 1px;
	height: 1px;
	/* Les transparentes forment la flèche */
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 30px solid deepskyblue;
	border-left: 30px solid rgba(0, 191, 255, .7);
	}
	/* Bouton précédent et suivant */
	#slideshow-container .commands {
		top: 40%;
	}
}
/****************\ 
  Ecran tablette
\****************/
@media only screen and (max-width: 850px) and (min-width: 450px){

	.figure-slide img {
		width: 100%;
	}
	.play_commands {
		top: 9%; right: 3%;
		width: 22px;
		height: 22px;
	}
	.play { right: 12%; }
	.pause:before,
	.pause:after { width: 42%; height: 22px; }
	.pause:before { left: -4px; }
	.pause:after { right: 0; }
	.play {
	width: 1px;
	height: 1px;
	/* Les transparentes forment la flèche */
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	border-left: 24px solid deepskyblue;
	border-left: 24px solid rgba(0, 191, 255, .7);
	}
	/* Bouton précédent et suivant */
	#slideshow-container .commands {
		top: 35%;
	}
}
/****************\
Ecran smart phone 
\****************/
@media only screen and (max-width: 450px) {

	.figure-slide img {
		width: 100%;
	}
	.play_commands {
		top: 12%; right: 6%;
		width: 9px;
		height: 9px;
	}
	.play { right: 19%; }
	.pause:before,
	.pause:after { width: 76%; height: 22px; }
	.pause:before { left: -10px; }
	.pause:after { right: 0; }
	.play {
	width: 1px;
	height: 1px;
	/* Les transparentes forment la flèche */
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 20px solid deepskyblue;
	border-left: 20px solid rgba(0, 191, 255, .7);
	}
	/* Bouton précédent et suivant */
	#slideshow-container .commands {
		top: 25%;
	}
}

J'espère que cela pourra en aider plus d'un !
Ce code a l'aire de fonctionner sur tout les navigateurs pc avec leur dernière mise a jour.
Voilà c'est tout ! Bon courage à vous pour le réadapter à votre goût.
Paix.
Louange au Tout Puissant, louange à Dieu seigneur des mondes.

Vgdl
Modifié par Vgdl (01 Apr 2017 - 13:49)
Sujet clos
Aller à