26868 sujets

CSS et mise en forme, CSS3

Bonjour,

Je me permets de vous contacter car j'essaie de mettre en place un slideshow en CSS.

Je souhaite obtenir ce résultat, mais avec deux slides uniquement : CodePen

Voici mon code : CodePen

Comment faire pour que les deux flèches directionnelles soient toujours présentes ?
Actuellement, elles n'apparaissent jamais en même temps (contrairement à l'exemple).

Merci de votre aide Smiley smile
Hello


/*---- NUMBER OF SLIDE CONFIGURATION ----*/
.wrapper {
  max-width: 60em;
  margin: 1em auto;
  position: relative;
}

label{
  position: relative;
}

input {
  display: none;
}

.inner {
  width: 500%;
  line-height: 0;
}

article {
  width: 20%;
  float: left;
  position: relative;
}
article img {
  width: 100%;
}

/*---- SET UP CONTROL ----*/
.slider-prev-next-control {
  height: 50px;
  position: absolute;
  top: 50%;
  width: 100%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.slider-prev-next-control label {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.7;
}
.slider-prev-next-control label:hover {
  opacity: 1;
}

/* Slider Styling */
.slider-wrapper {
  width: 100%;
  overflow: hidden;
  background: #fcfff4;
}
.slider-wrapper .inner {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
}

/*---- SET POSITION FOR SLIDE ----*/
slide1:checked ~ .slider-prev-next-control label:nth-child(2)::after,
slide2:checked ~ .slider-prev-next-control label:nth-child(1)::after {
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	text-decoration: inherit;
	margin: 0;
	line-height: 38px;
	font-size: 3em;
	display: block;
	color: #777;
}

.slider-prev-next-control label:nth-child(2)::after {
  font-family: FontAwesome;
	content: "\f105";
  position: absolute;
	top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.slider-prev-next-control label:nth-child(2) {
	display: block;
	float: right;
	margin-right: 5px;
}

.slider-prev-next-control label:nth-child(1) {
	display: block;
	float: left;
	margin-left: 5px;
}

.slider-prev-next-control label:nth-child(1)::after {
  font-family: FontAwesome;
	content: "\f104";
  position: absolute;
	top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#slide1:checked ~ .slider-wrapper .inner {
  margin-left: 0%;
}

#slide2:checked ~ .slider-wrapper .inner {
  margin-left: -100%;
}

Meilleure solution