Partage
  • Partager sur Facebook
  • Partager sur Twitter

Plusieurs Slideshows en une seule page

AngeRorroZephyr
    30 mai 2018 à 19:11:12

    Bonjour a vous, je suis actuellement sur la création de mon tout premier site et j'ai besoin de votre aide, après avoir pris un slideshow gratuit sur internet je l'ajoute sur mon site, je veux en mettre plusieurs mais le problème est que je n'arrive pas à l'adapter des que je met le deuxième le bouton agis sur le premier je vous envoie mon code : 

    .caroussel_diapo1 input{display:none}
    
.caroussel_diapo1{	
position:relative;
text-align:center;
margin:0 auto}


.contenu_carou1 {
text-align:left;	
width:500px;
height:332px;
margin:10px auto 40px auto;
-webkit-perspective:4000px;
perspective:4000px}


.caroussel1{
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
position:relative;
width:500px;
height:332px;
transition:1s}

.caroussel1 img {
position:absolute;
outline:1px solid transparent;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
transition:1s}

.caroussel1 .14 {
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
position:relative;
width:252px;
height:337px;
transition:1s}

.caroussel1 .10 {
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
position:relative;
width:253px;
height:337px;
transition:1s}

.caroussel1 .17 {
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
position:relative;
width:500px;
height:281px;
transition:1s}

.caroussel1 .22 {
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
position:relative;
width:500px;
height:362px;
transition:1s}

.caroussel1 img{filter:blur(3px);-webkit-filter:blur(3px);opacity:.8}	
.caroussel1 img:nth-child(1){-webkit-transform:translate3d(0,0,540px) scale(.8);transform:translate3d(0,0,540px) scale(.8)}
.caroussel1 img:nth-child(2){-webkit-transform:rotateY(45deg) translateZ(540px) scale(.8);transform:rotateY(45deg) translateZ(540px) scale(.8)}
.caroussel1 img:nth-child(3){-webkit-transform:rotateY(90deg) translateZ(540px) scale(.8);transform:rotateY(90deg) translateZ(540px) scale(.8)}
.caroussel1 img:nth-child(4){-webkit-transform:rotateY(135deg) translateZ(540px) scale(.8);transform:rotateY(135deg) translateZ(540px) scale(.8)}
.caroussel1 img:nth-child(5){-webkit-transform:rotateY(180deg) translateZ(540px) scale(.8);transform:rotateY(180deg) translateZ(540px) scale(.8)}
.caroussel1 img:nth-child(6){-webkit-transform:rotateY(225deg) translateZ(540px) scale(.8);transform:rotateY(225deg) translateZ(540px) scale(.8)}
.caroussel1 img:nth-child(7){-webkit-transform:rotateY(270deg) translateZ(540px) scale(.8);transform:rotateY(270deg) translateZ(540px) scale(.8)}
.caroussel1 img:nth-child(8){-webkit-transform:rotateY(315deg) translateZ(540px) scale(.8);transform:rotateY(315deg) translateZ(540px) scale(.8)}

.caroussel_diapo1 input[type=radio] + label {
cursor:pointer;
background:hsl(203,77%,81%);
display:inline-block;
width:20px;
border-radius:50%;
height:20px}
	
.caroussel_diapo1 input[type=radio]:checked + label{background:hsl(203,77%,61%)}

.caroussel_diapo1 label{background:hsl(203,77%,61%)}



.caroussel_diapo1 input[name="rotation"]:checked ~ .contenu_carou1 .caroussel1 img:nth-child(n){filter:drop-shadow(12px 12px 7px hsla(0,0%,0%,.5))}	

/*gauche*/
.caroussel_diapo1 #carou_un:checked ~ .contenu_carou1 .caroussel1{-webkit-transform:translateZ(-540px);transform:translateZ(-540px)}
.caroussel_diapo1 #carou_deux:checked ~ .contenu_carou1 .caroussel1{-webkit-transform:translateZ(-540px) rotateY(-45deg);transform:translateZ(-540px) rotateY(-45deg)}
.caroussel_diapo1 #carou_trois:checked ~ .contenu_carou1 .caroussel1{-webkit-transform:translateZ(-540px) rotateY(-90deg);transform:translateZ(-540px) rotateY(-90deg)}
.caroussel_diapo1 #carou_quatre:checked ~ .contenu_carou1 .caroussel1{-webkit-transform:translateZ(-540px) rotateY(-135deg);transform:translateZ(-540px) rotateY(-135deg)}
.caroussel_diapo1 #carou_cinq:checked ~ .contenu_carou1 .caroussel1{-webkit-transform:translateZ(-540px) rotateY(-180deg);transform:translateZ(-540px) rotateY(-180deg)}
.caroussel_diapo1 #carou_six:checked ~ .contenu_carou1 .caroussel1{-webkit-transform:translateZ(-540px) rotateY(-225deg);transform:translateZ(-540px) rotateY(-225deg)}
.caroussel_diapo1 #carou_sept:checked ~ .contenu_carou1 .caroussel1{-webkit-transform:translateZ(-540px) rotateY(-270deg);transform:translateZ(-540px) rotateY(-270deg)}
.caroussel_diapo1 #carou_huit:checked ~ .contenu_carou1 .caroussel1{-webkit-transform:translateZ(-540px) rotateY(-315deg);transform:translateZ(-540px) rotateY(-315deg)}


/*droite*/
.caroussel_diapo1 #carou_un:checked ~ .contenu_carou1 .caroussel1 img:nth-child(1){-webkit-transform:translateZ(540px) scale(1);transform:translateZ(540px) scale(1);opacity:1}
.caroussel_diapo1 #carou_deux:checked ~ .contenu_carou1 .caroussel1 img:nth-child(2){-webkit-transform:rotateY(45deg) translateZ(540px) scale(1);transform:rotateY(45deg) translateZ(540px) scale(1);opacity:1}
.caroussel_diapo1 #carou_trois:checked ~ .contenu_carou1 .caroussel1 img:nth-child(3){-webkit-transform:rotateY(90deg) translateZ(540px) scale(1);transform:rotateY(90deg) translateZ(540px) scale(1);opacity:1}
.caroussel_diapo1 #carou_quatre:checked ~ .contenu_carou1 .caroussel1 img:nth-child(4){-webkit-transform:rotateY(135deg) translateZ(540px) scale(1);transform:rotateY(135deg) translateZ(540px) scale(1);opacity:1}
.caroussel_diapo1 #carou_cinq:checked ~ .contenu_carou1 .caroussel1 img:nth-child(5){-webkit-transform:rotateY(180deg) translateZ(540px) scale(1);transform:rotateY(180deg) translateZ(540px) scale(1);opacity:1}
.caroussel_diapo1 #carou_six:checked ~ .contenu_carou1 .caroussel1 img:nth-child(6){-webkit-transform:rotateY(225deg) translateZ(540px) scale(1);transform:rotateY(225deg) translateZ(540px) scale(1);opacity:1}
.caroussel_diapo1 #carou_sept:checked ~ .contenu_carou1 .caroussel1 img:nth-child(7){-webkit-transform:rotateY(270deg) translateZ(540px) scale(1);transform:rotateY(270deg) translateZ(540px) scale(1);opacity:1}
.caroussel_diapo1 #carou_huit:checked ~ .contenu_carou1 .caroussel1 img:nth-child(8){-webkit-transform:rotateY(315deg) translateZ(540px) scale(1);transform:rotateY(315deg) translateZ(540px) scale(1);opacity:1}


.caroussel_diapo2 input{display:none}
    
.caroussel_diapo2{	
position:relative;
text-align:center;
margin:0 auto}


.contenu_carou2 {
text-align:left;	
width:500px;
height:332px;
margin:10px auto 40px auto;
-webkit-perspective:4000px;
perspective:4000px}


.caroussel2{
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
position:relative;
width:500px;
height:332px;
transition:1s}

.caroussel2 img {
position:absolute;
outline:1px solid transparent;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
transition:1s}



.caroussel2 .22 {
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
position:relative;
width:500px;
height:362px;
transition:1s}

.caroussel2 img{filter:blur(3px);-webkit-filter:blur(3px);opacity:.8}	
.caroussel2 img:nth-child(1){-webkit-transform:translate3d(0,0,540px) scale(.8);transform:translate3d(0,0,540px) scale(.8)}
.caroussel2 img:nth-child(2){-webkit-transform:rotateY(45deg) translateZ(540px) scale(.8);transform:rotateY(45deg) translateZ(540px) scale(.8)}
.caroussel2 img:nth-child(3){-webkit-transform:rotateY(90deg) translateZ(540px) scale(.8);transform:rotateY(90deg) translateZ(540px) scale(.8)}
.caroussel2 img:nth-child(4){-webkit-transform:rotateY(135deg) translateZ(540px) scale(.8);transform:rotateY(135deg) translateZ(540px) scale(.8)}

.caroussel_diapo2 input[type=radioo] + label {
cursor:pointer;
background:hsl(203,77%,81%);
display:inline-block;
width:20px;
border-radius:50%;
height:20px}
	
.caroussel_diapo2 input[type=radioo]:checked + label{background:hsl(203,77%,61%)}

.caroussel_diapo2 label{background:hsl(203,77%,61%)}



.caroussel_diapo2 input[name="rotationn"]:checked ~ .contenu_carou2 .caroussel2 img:nth-child(n){filter:drop-shadow(12px 12px 7px hsla(0,0%,0%,.5))}	

/*gauche*/
.caroussel_diapo2 #carou_un:checked ~ .contenu_carou2 .caroussel2{-webkit-transform:translateZ(-540px);transform:translateZ(-540px)}
.caroussel_diapo2 #carou_deux:checked ~ .contenu_carou2 .caroussel2{-webkit-transform:translateZ(-540px) rotateY(-45deg);transform:translateZ(-540px) rotateY(-45deg)}
.caroussel_diapo2 #carou_trois:checked ~ .contenu_carou2 .caroussel2{-webkit-transform:translateZ(-540px) rotateY(-90deg);transform:translateZ(-540px) rotateY(-90deg)}
.caroussel_diapo2 #carou_quatre:checked ~ .contenu_carou2 .caroussel2{-webkit-transform:translateZ(-540px) rotateY(-135deg);transform:translateZ(-540px) rotateY(-135deg)}
.caroussel_diapo2 #carou_cinq:checked ~ .contenu_carou2 .caroussel2{-webkit-transform:translateZ(-540px) rotateY(-180deg);transform:translateZ(-540px) rotateY(-180deg)}
.caroussel_diapo2 #carou_six:checked ~ .contenu_carou2 .caroussel2{-webkit-transform:translateZ(-540px) rotateY(-225deg);transform:translateZ(-540px) rotateY(-225deg)}
.caroussel_diapo2 #carou_sept:checked ~ .contenu_carou2 .caroussel2{-webkit-transform:translateZ(-540px) rotateY(-270deg);transform:translateZ(-540px) rotateY(-270deg)}
.caroussel_diapo2 #carou_huit:checked ~ .contenu_carou2 .caroussel2{-webkit-transform:translateZ(-540px) rotateY(-315deg);transform:translateZ(-540px) rotateY(-315deg)}


/*droite*/
.caroussel_diapo2 #carou_un:checked ~ .contenu_carou2 .caroussel2 img:nth-child(1){-webkit-transform:translateZ(540px) scale(1);transform:translateZ(540px) scale(1);opacity:1}
.caroussel_diapo2 #carou_deux:checked ~ .contenu_carou2 .caroussel2 img:nth-child(2){-webkit-transform:rotateY(45deg) translateZ(540px) scale(1);transform:rotateY(45deg) translateZ(540px) scale(1);opacity:1}
.caroussel_diapo2 #carou_trois:checked ~ .contenu_carou2 .caroussel2 img:nth-child(3){-webkit-transform:rotateY(90deg) translateZ(540px) scale(1);transform:rotateY(90deg) translateZ(540px) scale(1);opacity:1}
.caroussel_diapo2 #carou_quatre:checked ~ .contenu_carou2 .caroussel2 img:nth-child(4){-webkit-transform:rotateY(135deg) translateZ(540px) scale(1);transform:rotateY(135deg) translateZ(540px) scale(1);opacity:1}
.caroussel_diapo2 #carou_cinq:checked ~ .contenu_carou2 .caroussel2 img:nth-child(5){-webkit-transform:rotateY(180deg) translateZ(540px) scale(1);transform:rotateY(180deg) translateZ(540px) scale(1);opacity:1}
.caroussel_diapo2 #carou_six:checked ~ .contenu_carou2 .caroussel2 img:nth-child(6){-webkit-transform:rotateY(225deg) translateZ(540px) scale(1);transform:rotateY(225deg) translateZ(540px) scale(1);opacity:1}
.caroussel_diapo2 #carou_sept:checked ~ .contenu_carou2 .caroussel2 img:nth-child(7){-webkit-transform:rotateY(270deg) translateZ(540px) scale(1);transform:rotateY(270deg) translateZ(540px) scale(1);opacity:1}
.caroussel_diapo2 #carou_huit:checked ~ .contenu_carou2 .caroussel2 img:nth-child(8){-webkit-transform:rotateY(315deg) translateZ(540px) scale(1);transform:rotateY(315deg) translateZ(540px) scale(1);opacity:1}

    <div class='caroussel_diapo1'>
											<input checked id="carou_un" name="rotation" type="radio">
											<label for="carou_un"></label>
											<input id="carou_deux" name="rotation" type="radio">
											<label for="carou_deux"></label>
											<input id="carou_trois" name="rotation" type="radio">
											<label for="carou_trois"></label>
											<input id="carou_quatre" name="rotation" type="radio">
											<label for="carou_quatre"></label>
											<div class="contenu_carou1">
												<div class="caroussel1">
												<img class="17" src="images/17.jpg" alt>
												<img class="17" src="images/18.jpg" alt>
												<img class="17" src="images/19.jpg" alt>
												<img class="17" src="images/20.jpg" alt>
												</div>
											</div>
											</div>
<div class='caroussel_diapo2'>
											<input checked id="carou_un" name="rotationn" type="radioo">
											<label for="carou_un"></label>
											<input id="carou_deux" name="rotationn" type="radioo">
											<label for="carou_deux"></label>
											<input id="carou_trois" name="rotationn" type="radioo">
											<label for="carou_trois"></label>
											<input id="carou_quatre" name="rotationn" type="radioo">
											<label for="carou_quatre"></label>
											<div class="contenu_carou2">
												<div class="caroussel2">
												<img class="17" src="images/21.jpg" alt>
												<img class="22" src="images/22.jpg" alt>
												<img class="22" src="images/23.jpg" alt>
												<img class="17" src="images/24.jpg" alt>
												</div>
											</div>
											</div>




    • Partager sur Facebook
    • Partager sur Twitter
    Mewen_bzh
    • HTML / CSS
      31 mai 2018 à 0:50:04

      Salut, 

      Je te conseille pour commencer de revoir ton code. Je vois notamment que tu as plusieurs fois les mêmes id sur ta page or un id doit être unique. Pas étonnant que le navigateur s'emmêle les pinceaux dans ces conditions... 😉

      • Partager sur Facebook
      • Partager sur Twitter
      Je ne réponds pas aux messages privés.
      AngeRorroZephyr
        31 mai 2018 à 19:32:13

        Bonjour merci pour ta réponse j'ai changé mon code comme ceci et sa na rien changé: 

        <div class='caroussel_diapo1'>
											<input checked id="carou_un" name="rotation" type="radio">
											<label for="carou_un"></label>
											<input id="carou_deux" name="rotation" type="radio">
											<label for="carou_deux"></label>
											<input id="carou_trois" name="rotation" type="radio">
											<label for="carou_trois"></label>
											<input id="carou_quatre" name="rotation" type="radio">
											<label for="carou_quatre"></label>
											<div class="contenu_carou1">
												<div class="caroussel1">
												<img class="17" src="images/17.jpg" alt>
												<img class="17" src="images/18.jpg" alt>
												<img class="17" src="images/19.jpg" alt>
												<img class="17" src="images/20.jpg" alt>
												</div>
											</div>
											</div>
<div class='caroussel_diapo2'>
											<input checked id="carou_neuf" name="rotationn" type="radioo">
											<label for="carou_neuf"></label>
											<input id="carou_dix" name="rotationn" type="radioo">
											<label for="carou_dix"></label>
											<input id="carou_onze" name="rotationn" type="radioo">
											<label for="carou_onze"></label>
											<input id="carou_douze" name="rotationn" type="radioo">
											<label for="carou_douze"></label>
											<div class="contenu_carou2">
												<div class="caroussel2">
												<img class="17" src="images/21.jpg" alt>
												<img class="22" src="images/22.jpg" alt>
												<img class="22" src="images/23.jpg" alt>
												<img class="17" src="images/24.jpg" alt>
												</div>
											</div>
											</div>
        .caroussel_diapo1 input{display:none}
    
.caroussel_diapo1{	
position:relative;
text-align:center;
margin:0 auto}


.contenu_carou1 {
text-align:left;	
width:500px;
height:332px;
margin:10px auto 40px auto;
-webkit-perspective:4000px;
perspective:4000px}


.caroussel1{
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
position:relative;
width:500px;
height:332px;
transition:1s}

.caroussel1 img {
position:absolute;
outline:1px solid transparent;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
transition:1s}

.caroussel1 .14 {
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
position:relative;
width:252px;
height:337px;
transition:1s}

.caroussel1 .10 {
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
position:relative;
width:253px;
height:337px;
transition:1s}

.caroussel1 .17 {
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
position:relative;
width:500px;
height:281px;
transition:1s}

.caroussel1 .22 {
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
position:relative;
width:500px;
height:362px;
transition:1s}

.caroussel1 img{filter:blur(3px);-webkit-filter:blur(3px);opacity:.8}	
.caroussel1 img:nth-child(1){-webkit-transform:translate3d(0,0,540px) scale(.8);transform:translate3d(0,0,540px) scale(.8)}
.caroussel1 img:nth-child(2){-webkit-transform:rotateY(45deg) translateZ(540px) scale(.8);transform:rotateY(45deg) translateZ(540px) scale(.8)}
.caroussel1 img:nth-child(3){-webkit-transform:rotateY(90deg) translateZ(540px) scale(.8);transform:rotateY(90deg) translateZ(540px) scale(.8)}
.caroussel1 img:nth-child(4){-webkit-transform:rotateY(135deg) translateZ(540px) scale(.8);transform:rotateY(135deg) translateZ(540px) scale(.8)}
.caroussel1 img:nth-child(5){-webkit-transform:rotateY(180deg) translateZ(540px) scale(.8);transform:rotateY(180deg) translateZ(540px) scale(.8)}
.caroussel1 img:nth-child(6){-webkit-transform:rotateY(225deg) translateZ(540px) scale(.8);transform:rotateY(225deg) translateZ(540px) scale(.8)}
.caroussel1 img:nth-child(7){-webkit-transform:rotateY(270deg) translateZ(540px) scale(.8);transform:rotateY(270deg) translateZ(540px) scale(.8)}
.caroussel1 img:nth-child(8){-webkit-transform:rotateY(315deg) translateZ(540px) scale(.8);transform:rotateY(315deg) translateZ(540px) scale(.8)}

.caroussel_diapo1 input[type=radio] + label {
cursor:pointer;
background:hsl(203,77%,81%);
display:inline-block;
width:20px;
border-radius:50%;
height:20px}
	
.caroussel_diapo1 input[type=radio]:checked + label{background:hsl(203,77%,61%)}

.caroussel_diapo1 label{background:hsl(203,77%,61%)}



.caroussel_diapo1 input[name="rotation"]:checked ~ .contenu_carou1 .caroussel1 img:nth-child(n){filter:drop-shadow(12px 12px 7px hsla(0,0%,0%,.5))}	

/*gauche*/
.caroussel_diapo1 #carou_un:checked ~ .contenu_carou1 .caroussel1{-webkit-transform:translateZ(-540px);transform:translateZ(-540px)}
.caroussel_diapo1 #carou_deux:checked ~ .contenu_carou1 .caroussel1{-webkit-transform:translateZ(-540px) rotateY(-45deg);transform:translateZ(-540px) rotateY(-45deg)}
.caroussel_diapo1 #carou_trois:checked ~ .contenu_carou1 .caroussel1{-webkit-transform:translateZ(-540px) rotateY(-90deg);transform:translateZ(-540px) rotateY(-90deg)}
.caroussel_diapo1 #carou_quatre:checked ~ .contenu_carou1 .caroussel1{-webkit-transform:translateZ(-540px) rotateY(-135deg);transform:translateZ(-540px) rotateY(-135deg)}
.caroussel_diapo1 #carou_cinq:checked ~ .contenu_carou1 .caroussel1{-webkit-transform:translateZ(-540px) rotateY(-180deg);transform:translateZ(-540px) rotateY(-180deg)}
.caroussel_diapo1 #carou_six:checked ~ .contenu_carou1 .caroussel1{-webkit-transform:translateZ(-540px) rotateY(-225deg);transform:translateZ(-540px) rotateY(-225deg)}
.caroussel_diapo1 #carou_sept:checked ~ .contenu_carou1 .caroussel1{-webkit-transform:translateZ(-540px) rotateY(-270deg);transform:translateZ(-540px) rotateY(-270deg)}
.caroussel_diapo1 #carou_huit:checked ~ .contenu_carou1 .caroussel1{-webkit-transform:translateZ(-540px) rotateY(-315deg);transform:translateZ(-540px) rotateY(-315deg)}


/*droite*/
.caroussel_diapo1 #carou_un:checked ~ .contenu_carou1 .caroussel1 img:nth-child(1){-webkit-transform:translateZ(540px) scale(1);transform:translateZ(540px) scale(1);opacity:1}
.caroussel_diapo1 #carou_deux:checked ~ .contenu_carou1 .caroussel1 img:nth-child(2){-webkit-transform:rotateY(45deg) translateZ(540px) scale(1);transform:rotateY(45deg) translateZ(540px) scale(1);opacity:1}
.caroussel_diapo1 #carou_trois:checked ~ .contenu_carou1 .caroussel1 img:nth-child(3){-webkit-transform:rotateY(90deg) translateZ(540px) scale(1);transform:rotateY(90deg) translateZ(540px) scale(1);opacity:1}
.caroussel_diapo1 #carou_quatre:checked ~ .contenu_carou1 .caroussel1 img:nth-child(4){-webkit-transform:rotateY(135deg) translateZ(540px) scale(1);transform:rotateY(135deg) translateZ(540px) scale(1);opacity:1}
.caroussel_diapo1 #carou_cinq:checked ~ .contenu_carou1 .caroussel1 img:nth-child(5){-webkit-transform:rotateY(180deg) translateZ(540px) scale(1);transform:rotateY(180deg) translateZ(540px) scale(1);opacity:1}
.caroussel_diapo1 #carou_six:checked ~ .contenu_carou1 .caroussel1 img:nth-child(6){-webkit-transform:rotateY(225deg) translateZ(540px) scale(1);transform:rotateY(225deg) translateZ(540px) scale(1);opacity:1}
.caroussel_diapo1 #carou_sept:checked ~ .contenu_carou1 .caroussel1 img:nth-child(7){-webkit-transform:rotateY(270deg) translateZ(540px) scale(1);transform:rotateY(270deg) translateZ(540px) scale(1);opacity:1}
.caroussel_diapo1 #carou_huit:checked ~ .contenu_carou1 .caroussel1 img:nth-child(8){-webkit-transform:rotateY(315deg) translateZ(540px) scale(1);transform:rotateY(315deg) translateZ(540px) scale(1);opacity:1}


.caroussel_diapo2 input{display:none}
    
.caroussel_diapo2{	
position:relative;
text-align:center;
margin:0 auto}


.contenu_carou2 {
text-align:left;	
width:500px;
height:332px;
margin:10px auto 40px auto;
-webkit-perspective:4000px;
perspective:4000px}


.caroussel2{
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
position:relative;
width:500px;
height:332px;
transition:1s}

.caroussel2 img {
position:absolute;
outline:1px solid transparent;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
transition:1s}



.caroussel2 .22 {
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
position:relative;
width:500px;
height:362px;
transition:1s}

.caroussel2 img{filter:blur(3px);-webkit-filter:blur(3px);opacity:.8}	
.caroussel2 img:nth-child(9){-webkit-transform:translate3d(0,0,540px) scale(.8);transform:translate3d(0,0,540px) scale(.8)}
.caroussel2 img:nth-child(10){-webkit-transform:rotateY(45deg) translateZ(540px) scale(.8);transform:rotateY(45deg) translateZ(540px) scale(.8)}
.caroussel2 img:nth-child(11){-webkit-transform:rotateY(90deg) translateZ(540px) scale(.8);transform:rotateY(90deg) translateZ(540px) scale(.8)}
.caroussel2 img:nth-child(12){-webkit-transform:rotateY(135deg) translateZ(540px) scale(.8);transform:rotateY(135deg) translateZ(540px) scale(.8)}
.caroussel2 img:nth-child(13){-webkit-transform:rotateY(180deg) translateZ(540px) scale(.8);transform:rotateY(180deg) translateZ(540px) scale(.8)}
.caroussel2 img:nth-child(14){-webkit-transform:rotateY(225deg) translateZ(540px) scale(.8);transform:rotateY(225deg) translateZ(540px) scale(.8)}
.caroussel2 img:nth-child(15){-webkit-transform:rotateY(270deg) translateZ(540px) scale(.8);transform:rotateY(270deg) translateZ(540px) scale(.8)}
.caroussel2 img:nth-child(16){-webkit-transform:rotateY(315deg) translateZ(540px) scale(.8);transform:rotateY(315deg) translateZ(540px) scale(.8)}

.caroussel_diapo2 input[type=radioo] + label {
cursor:pointer;
background:hsl(203,77%,81%);
display:inline-block;
width:20px;
border-radius:50%;
height:20px}
	
.caroussel_diapo2 input[type=radioo]:checked + label{background:hsl(203,77%,61%)}

.caroussel_diapo2 label{background:hsl(203,77%,61%)}



.caroussel_diapo2 input[name="rotationn"]:checked ~ .contenu_carou2 .caroussel2 img:nth-child(n){filter:drop-shadow(12px 12px 7px hsla(0,0%,0%,.5))}	

/*gauche*/
.caroussel_diapo2 #carou_neuf:checked ~ .contenu_carou2 .caroussel2{-webkit-transform:translateZ(-540px);transform:translateZ(-540px)}
.caroussel_diapo2 #carou_dix:checked ~ .contenu_carou2 .caroussel2{-webkit-transform:translateZ(-540px) rotateY(-45deg);transform:translateZ(-540px) rotateY(-45deg)}
.caroussel_diapo2 #carou_onze:checked ~ .contenu_carou2 .caroussel2{-webkit-transform:translateZ(-540px) rotateY(-90deg);transform:translateZ(-540px) rotateY(-90deg)}
.caroussel_diapo2 #carou_douze:checked ~ .contenu_carou2 .caroussel2{-webkit-transform:translateZ(-540px) rotateY(-135deg);transform:translateZ(-540px) rotateY(-135deg)}
.caroussel_diapo2 #carou_treize:checked ~ .contenu_carou2 .caroussel2{-webkit-transform:translateZ(-540px) rotateY(-180deg);transform:translateZ(-540px) rotateY(-180deg)}
.caroussel_diapo2 #carou_quatorze:checked ~ .contenu_carou2 .caroussel2{-webkit-transform:translateZ(-540px) rotateY(-225deg);transform:translateZ(-540px) rotateY(-225deg)}
.caroussel_diapo2 #carou_quinze:checked ~ .contenu_carou2 .caroussel2{-webkit-transform:translateZ(-540px) rotateY(-270deg);transform:translateZ(-540px) rotateY(-270deg)}
.caroussel_diapo2 #carou_seize:checked ~ .contenu_carou2 .caroussel2{-webkit-transform:translateZ(-540px) rotateY(-315deg);transform:translateZ(-540px) rotateY(-315deg)}


/*droite*/
.caroussel_diapo2 #carou_neuf:checked ~ .contenu_carou2 .caroussel2 img:nth-child(9){-webkit-transform:translateZ(540px) scale(1);transform:translateZ(540px) scale(1);opacity:1}
.caroussel_diapo2 #carou_dix:checked ~ .contenu_carou2 .caroussel2 img:nth-child(10){-webkit-transform:rotateY(45deg) translateZ(540px) scale(1);transform:rotateY(45deg) translateZ(540px) scale(1);opacity:1}
.caroussel_diapo2 #carou_onze:checked ~ .contenu_carou2 .caroussel2 img:nth-child(11){-webkit-transform:rotateY(90deg) translateZ(540px) scale(1);transform:rotateY(90deg) translateZ(540px) scale(1);opacity:1}
.caroussel_diapo2 #carou_douze:checked ~ .contenu_carou2 .caroussel2 img:nth-child(12){-webkit-transform:rotateY(135deg) translateZ(540px) scale(1);transform:rotateY(135deg) translateZ(540px) scale(1);opacity:1}
.caroussel_diapo2 #carou_treize:checked ~ .contenu_carou2 .caroussel2 img:nth-child(13){-webkit-transform:rotateY(180deg) translateZ(540px) scale(1);transform:rotateY(180deg) translateZ(540px) scale(1);opacity:1}
.caroussel_diapo2 #carou_quatorze:checked ~ .contenu_carou2 .caroussel2 img:nth-child(14){-webkit-transform:rotateY(225deg) translateZ(540px) scale(1);transform:rotateY(225deg) translateZ(540px) scale(1);opacity:1}
.caroussel_diapo2 #carou_quinze:checked ~ .contenu_carou2 .caroussel2 img:nth-child(15){-webkit-transform:rotateY(270deg) translateZ(540px) scale(1);transform:rotateY(270deg) translateZ(540px) scale(1);opacity:1}
.caroussel_diapo2 #carou_seize:checked ~ .contenu_carou2 .caroussel2 img:nth-child(16){-webkit-transform:rotateY(315deg) translateZ(540px) scale(1);transform:rotateY(315deg) translateZ(540px) scale(1);opacity:1}




        • Partager sur Facebook
        • Partager sur Twitter
        AngeRorroZephyr
          3 juin 2018 à 17:20:07

          Up svp je ne sais pas du tout comment réussir a faire ce slideshow svp
          • Partager sur Facebook
          • Partager sur Twitter
          Skytchup
          • HTML / CSS
            4 juin 2018 à 9:51:23

            Salut !

            Je vois que tu as un code immense et pour être honnête je ne l'ai pas entièrement lu. J'ai fait un slideshow sur mon site grâce au tuto ici !

            C'est super facile et le rendu est top.

            • Partager sur Facebook
            • Partager sur Twitter
            Trop jeune pour connaître.
            AngeRorroZephyr
              5 juin 2018 à 22:15:41

              Bonjour merci pour ta réponse après le problème c'est que le site je vais le mettre en ligne et je ne veux pas trop avoir de problème la dessus :D 

              • Partager sur Facebook
              • Partager sur Twitter

              Plusieurs Slideshows en une seule page

              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
              × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
              • Editeur ●
              • Markdown