Slider uniquement en Css

Question

Kevin_L

27 Nov 2017 à 18:41

Bonjour à tous ,
je dois réaliser un slider uniquement en css composer de 2 images
j'ai obtenu le résultat visuel que je souhaitais c'est a dire une pause sur la seconde image sans revenir brutalement sur la première,mais comme je n'ai pas bien saisis le fonctionnement j'ai bidouiller énormément pour arriver a ce résultat
Sur mon pc portable il y a une barre de défilement les images prennent plus de 100% si je modifie la taille des images elle ne sont plus superposé
Pouvez vous m'aider à avoir un code plus propre? Je devrais le rendre responsive et je ne sais pas comment m'y prendre
J'aimerais aussi animer la timeline qu'elle soit a 100% à la seconde et qu'elle revienne à son état initial.
(Il y a aussi un texte par dessus le slider)

Merci à vous ! je suis vraiment bloqué


<div class="slider">
     <div class="slides">
     <img src="images/slider/bg1.jpg">
 	 <img src="images/slider/bg2.jpg">	 
 	 </div>
 	 <div class="text">
 	 	 <p><span>Webagency</span> : L'agence de tous </br>
      vos projets!</p>
      <p>Vous avez un projet web? La WebAgency vous aide à le réaliser</p>
      <div class="Bouton_info">
      <a href="#">Plus d'infos</a>
 	 </div>
   <div class="timeline"></div>
 </div>


.slider
{
  width: 1600px;
  overflow: hidden;
  position: relative;
}
.slides
{
	width:200%;

	animation: glisse 15s infinite linear;
	animation-timing-function: ease-in-out; 
}
img
{
	float: left;

}
.timeline
{
	height: 5px;
	width: 50px;
	position: relative;
    background: #2BAFD7;
    top:154px;
    right: 115px;
}


@keyframes glisse
{
	0%{
		transform: translateX(0);
	}
	25%
	{
		transform: translateX(0);
	}
	50%
	{
		transform: translateX(-50%);
	}
	55%
	{
		transform: translateX(-50%);
	}
	65%
	{
		transform: translateX(-50%);
	}
	75%{
		transform: translateX(-50%);
	}
	95%
	{
		transform: translateX(1);
	}

	100%{
		transform: translateX(0);
	}
}

thierry

28 Nov 2017 à 12:27

J'espère que ceci pourra t'aider :

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

Bonne continuation.

Kevin_L

30 Nov 2017 à 21:49

Merci j'y avais déjà jeter un oeil mais je n'y arrive toujours pas,quelqu'un ici pourrait m'aider s'il vous plait?

Bongota

1 Dec 2017 à 19:14

Bonjour,

voici le css et le html d'un slider que j'ai découvert il y a deux jours (mais je ne sais plus où, c'est pourquoi je ne donne pas le lien).
Je l'ai un peu modifié, notamment dans les media queries, pour l'adapter aux points de rupture de mon site. J'ai aussi modifié l'espacement des petits points (dots) qui permettent de choisir une image, pour une facilité d'utilisation sur les portables, avec des gros doigts J'ai aussi supprimé le background d'origine. Ce n'est pas le slider qui est sur mon site mais je l'ai testé, il fonctionne, du premier coup et parfaitement "responsive". J'ai aussi modifié le width , afin d'avoir le plein écran en 767 et 1024.
Les sliders "responsive" et en full css sont rares. Je cherche le lien de celui de mon site, qui lui, est a défilement automatique.

Le css :

.sp-slideshow {
    position: relative;
	margin: 10px auto;
	width: 100%;
	max-width: 1000px;
	min-width: 260px;
	height: 460px;
	border: 10px solid #fff;
	border: 4px solid rgba(255,255,255,0.9);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.sp-content {
    background-image: -webkit-radial-gradient(Gray, #fafad2);
background-image: radial-gradient(Gray, #fafad2);
background-attachment: fixed;
background-size: cover;
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.sp-slideshow input {
    position: absolute;
	bottom: 15px;
	left: 50%;
	width: 9px;
	height: 9px;
	z-index: 1001;
	cursor: pointer;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
}
.sp-slideshow input + label {
    position: absolute;
    bottom: 15px;
	left: 50%;
    	width: 6px;
	height: 6px;
	display: block;
	z-index: 1000;
	border: 3px solid #fff;
	border: 3px solid ;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: background-color linear 0.1s;
    -moz-transition: background-color linear 0.1s;
    -o-transition: background-color linear 0.1s;
    -ms-transition: background-color linear 0.1s;
    transition: background-color linear 0.1s;
}
.sp-slideshow input:checked + label {
	background-color: #fff;
    	background-color: black;
}

.sp-selector-1, .button-label-1 {
    margin-left: -80px;
}

.sp-selector-2, .button-label-2 {
    margin-left: -38px;
}

.sp-selector-4, .button-label-4 {
    margin-left: 38px;
}

.sp-selector-5, .button-label-5 {
    margin-left: 80px;
}

.sp-arrow {
    position: absolute;
	top: 50%;
	width: 28px;
	height: 38px;
	margin-top: -19px;
	display: none;
	opacity: 0.8;
	cursor: pointer;
	z-index: 1000;
	background: transparent url(Images/arrows.png) no-repeat;
	-webkit-transition: opacity linear 0.3s;
    -moz-transition: opacity linear 0.3s;
    -o-transition: opacity linear 0.3s;
    -ms-transition: opacity linear 0.3s;
    transition: opacity linear 0.3s;
}
.sp-arrow:hover{
	opacity: 1;
}
.sp-arrow:active{
	margin-top: -18px;
}
.sp-selector-1:checked ~ .sp-arrow.sp-a2,
.sp-selector-2:checked ~ .sp-arrow.sp-a3,
.sp-selector-3:checked ~ .sp-arrow.sp-a4,
.sp-selector-4:checked ~ .sp-arrow.sp-a5 {
    	right: 15px;
	display: block;
	background-position: top right;
}
.sp-selector-2:checked ~ .sp-arrow.sp-a1,
.sp-selector-3:checked ~ .sp-arrow.sp-a2,
.sp-selector-4:checked ~ .sp-arrow.sp-a3,
.sp-selector-5:checked ~ .sp-arrow.sp-a4 {
    	left: 15px;
	display: block;
	background-position: top left;
}

.sp-slideshow input:checked ~ .sp-content {
    -webkit-transition: background-position linear 0.6s, background-color linear 0.8s;
    -moz-transition: background-position linear 0.6s, background-color linear 0.8s;
    -o-transition: background-position linear 0.6s, background-color linear 0.8s;
    -ms-transition: background-position linear 0.6s, background-color linear 0.8s;
    transition: background-position linear 0.6s, background-color linear 0.8s;
}

.sp-slideshow input:checked ~ .sp-content .sp-parallax-bg {
    -webkit-transition: background-position linear 0.7s;
    -moz-transition: background-position linear 0.7s;
    -o-transition: background-position linear 0.7s;
    -ms-transition: background-position linear 0.7s;
    transition: background-position linear 0.7s;
}

input.sp-selector-1:checked ~ .sp-content {
    	background-position: 0 0;
	background-color: #727b7f;
}

input.sp-selector-2:checked ~ .sp-content {
    	background-position: -100px 0;
	background-color: #7f7276;
}

input.sp-selector-3:checked ~ .sp-content {
    	background-position: -200px 0;
	background-color: #737f72;
}

input.sp-selector-4:checked ~ .sp-content {
    	background-position: -300px 0;
	background-color: #79727f;
}

input.sp-selector-5:checked ~ .sp-content {
    	background-position: -400px 0;
	background-color: #7d7f72;
}

input.sp-selector-1:checked ~ .sp-content .sp-parallax-bg {
    	background-position: 0 0;
}

input.sp-selector-2:checked ~ .sp-content .sp-parallax-bg {
    	background-position: -200px 0;
}

input.sp-selector-3:checked ~ .sp-content .sp-parallax-bg {
    	background-position: -400px 0;
}

input.sp-selector-4:checked ~ .sp-content .sp-parallax-bg {
    	background-position: -600px 0;
}

input.sp-selector-5:checked ~ .sp-content .sp-parallax-bg {
    	background-position: -800px 0;
}

.sp-slider {
    	position: relative;
	left: 0;
    	width: 500%;
	height: 100%;
	list-style: none;
    	margin: 0;
	padding: 0;
    -webkit-transition: left ease-in 0.8s;
    -moz-transition: left ease-in 0.8s;
    -o-transition: left ease-in 0.8s;
    -ms-transition: left ease-in 0.8s;
    transition: left ease-in 0.8s; 
}

.sp-slider > li {
	color: #fff;
	width: 20%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	height: 100%;
	padding: 0 60px;
    	float: left;
	text-align: center;
	opacity: 0.4;
    -webkit-transition: opacity ease-in 0.4s 0.8s;
    -moz-transition: opacity ease-in 0.4s 0.8s;
    -o-transition: opacity ease-in 0.4s 0.8s;
    -ms-transition: opacity ease-in 0.4s 0.8s;
    transition: opacity ease-in 0.4s 0.8s; 
}
.sp-slider > li img{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
	margin: 0 auto;
	padding: 40px 0 50px 0;
	max-height: 100%;
	max-width: 100%;
}
input.sp-selector-1:checked ~ .sp-content .sp-slider {
    left: 0;
}

input.sp-selector-2:checked ~ .sp-content .sp-slider {
    left: -100%;
}

input.sp-selector-3:checked ~ .sp-content .sp-slider {
    left: -200%;
}

input.sp-selector-4:checked ~ .sp-content .sp-slider {
    left: -300%;
}

input.sp-selector-5:checked ~ .sp-content .sp-slider {
    left: -400%;
}

input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child,
input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2),
input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3),
input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4),
input.sp-selector-5:checked ~ .sp-content .sp-slider > li:nth-child(5){
	opacity: 1;
}
@media screen and (max-width: 1024px){
	.sp-slideshow { height: auto; }
}
@media screen and (max-width: 767px){
	.sp-slideshow { height: auto; }
}
@media screen and (max-width: 320px){
	.sp-slideshow { height: auto; }
}

et le html :


<body>
<div class="container">
	<div class="sp-slideshow">
		<input id="button-1" type="radio" name="radio-set" class="sp-selector-1" checked="checked" />
		<label for="button-1" class="button-label-1"></label>
		<input id="button-2" type="radio" name="radio-set" class="sp-selector-2" />
		<label for="button-2" class="button-label-2"></label>
		<input id="button-3" type="radio" name="radio-set" class="sp-selector-3" />
		<label for="button-3" class="button-label-3"></label>
		<input id="button-4" type="radio" name="radio-set" class="sp-selector-4" />
		<label for="button-4" class="button-label-4"></label>
		<input id="button-5" type="radio" name="radio-set" class="sp-selector-5" />
		<label for="button-5" class="button-label-5"></label>
		<label for="button-1" class="sp-arrow sp-a1"></label>
		<label for="button-2" class="sp-arrow sp-a2"></label>
		<label for="button-3" class="sp-arrow sp-a3"></label>
		<label for="button-4" class="sp-arrow sp-a4"></label>
		<label for="button-5" class="sp-arrow sp-a5"></label>
				
		<div class="sp-content">
			<div class="sp-parallax-bg"></div>
			<ul class="sp-slider clearfix">
				<li>

<picture>
   <source media="(min-width: 16em)"     
      srcset="Images/mes_images.jpg 320w,
      Images/mes_images.jpg 780w, 
      Images/mes_images.jpg 1024w"/>
   <img src="Images/mes_images.jpg" alt="Le nom de l'image" />
</picture>
</li>
				<li>

et ainsi de suite pour plus d'images.

Kevin_L

1 Dec 2017 à 21:17

Merci à toi! je vais essayer ca

Bongota

2 Dec 2017 à 10:54

Voici le lien sur le slider dont je parle ici :
http://www.outils-web.com/page-script-html-css.asp
Le slider se nomme : Diaporama avec effet parallax
Tu le dézip et tu auras tout ce qui te manquait dans mon post (l'image des flèches et le fichier normalize).

Celui de mon site :
http://thenewcode.com/627/Make-A-Responsive-CSS3-Image-Slider
mais il est à défilement automatique.

Bonne continuation.

Sujet clos

CSS et mise en forme, CSS3

Slider uniquement en Css