28172 sujets

CSS et mise en forme, CSS3

Plusieurs slideshow full CSS3 sur une page

Bonjour bonjour,

j'essaie désespérément d'intégrer 2 slides show CSS3 sur une même page sur la base de cet exemple: http://csscience.com/responsiveslidercss3/

Le 1er marche nickel mais pas le deuxième Smiley sweatdrop

Pour le deuxième slideshow, les boutons type "radio" apparaissent et permettent de naviguer entre chaque slide (sans pour autant avoir l'effet hover quand l'image est activée)
Par contre, les bouton de contrôle type "flèches" n'apparaissent pas ainsi que la div info qui semble masquée (possibilité de cliquer sur le lien sans voir le texte)

J'ai essayé de bidouiller en créant une nouvel élément #slider2 et en dupliquant certaines des règles CSS (.inner, .#slides, #controls, #active) mais cela ne règle en rien le problème.
Je ne sais donc pas où modifier la feuille de style pour activer les différents éléments de navigation et de contrôle...

Quelqu'un aurait-il une idée / solution? Smiley biggrin Smiley biggrin Smiley biggrin

Merci par avance!

llylly

------------------------ 


<section class="cc_content_3" id="page3">

<article id="slider">

		<!-- Slider Setup -->
	
		<input checked type=radio name=slider id=slide1 />
		<input type=radio name=slider id=slide2 />
		<input type=radio name=slider id=slide3 />
		<input type=radio name=slider id=slide4 />
		<input type=radio name=slider id=slide5 />

		<!-- The Slider -->
		
		<div id="slides">
		
			<div id="overflow">
			
				<div class="inner">
				
				<article>
				<div class=info><a href="#"><h3>texte1</h3></a></div>
				<img src="img/image1"/>
				</article>
					
				<article>
				<div class=info><a href="#" ><h3>texte2</h3></a></div>
				<img src="image2" />
				</article>
					
				<article>
				<div class=info><a href="#" ><h3>texte3</h3></a></div>
				<img src="img/image3" />
				</article>
					
				<article>
				<div class=info><a href="#" ><h3>texte4</h3></a></div>
				<img src="img/image4" />
				</article>
					
				<<article>
				<div class=info><a href="#" ><h3>texte5</h3></a></div>
				<img src="img/image5" />
				</article>
	
				</div> <!-- .inner -->
				
			</div> <!-- #overflow -->
		
		</div> <!-- #slides -->
	
	
		<!-- Controls and Active Slide Display -->
	
		<div id=controls>

			<label for=slide1></label>
			<label for=slide2></label>
			<label for=slide3></label>
			<label for=slide4></label>
			<label for=slide5></label>

		
		</div> <!-- #controls -->
		
		<div id=active>

			<label for=slide1></label>
			<label for=slide2></label>
			<label for=slide3></label>
			<label for=slide4></label>
			<label for=slide5></label>

			
		</div> <!-- #active -->
	

	</article> <!-- #slider -->
                         
</section>

<section class="cc_content_32" id="page3">
<article id="slider">


		<!-- Slider Setup -->
	
		<input checked type=radio name=slider2 id=slide6 />
		<input type=radio name=slider2 id=slide7 />
		<input type=radio name=slider2 id=slide8 />
		<input type=radio name=slider2 id=slide9 />
		<input type=radio name=slider2 id=slide10 />

	
		<!-- The Slider -->

<div id="slides">
		
			<div id="overflow">
			
				<div class="inner">
				
				<article>
				<div class=info><a href="#"><h3>texte1</h3></a></div>
				<img src="img/image1"/>
				</article>
					
				<article>
				<div class=info><a href="#" ><h3>texte2</h3></a></div>
				<img src="image2" />
				</article>
					
				<article>
				<div class=info><a href="#" ><h3>texte3</h3></a></div>
				<img src="img/image3" />
				</article>
					
				<article>
				<div class=info><a href="#" ><h3>texte4</h3></a></div>
				<img src="img/image4" />
				</article>
					
				<<article>
				<div class=info><a href="#" ><h3>texte5</h3></a></div>
				<img src="img/image5" />
				</article>
	
				</div> <!-- .inner -->
				
			</div> <!-- #overflow -->
		
		</div> <!-- #slides -->

<!-- Controls and Active Slide Display -->
	
		<div id=controls>
			
			<label for=slide6></label>
			<label for=slide7></label>
			<label for=slide8></label>
			<label for=slide9></label>
			<label for=slide10></label>
		
		</div> <!-- #controls -->
		
		<div id=active>

			<label for=slide6></label>
			<label for=slide7></label>
			<label for=slide8></label>
			<label for=slide9></label>
			<label for=slide10></label>

			
		</div> <!-- #active -->
	
	</article> <!-- #slider -->
</section>
</code>

[code=css]

/* Slider Setup */

input {
	display: none;
}

#slide1:checked ~ #slides .inner { margin-left:0; }
#slide2:checked ~ #slides .inner { margin-left:-100%; }
#slide3:checked ~ #slides .inner { margin-left:-200%; }
#slide4:checked ~ #slides .inner { margin-left:-300%; }
#slide5:checked ~ #slides .inner { margin-left:-400%; }

#slide6:checked ~ #slides .inner { margin-left:0; }
#slide7:checked ~ #slides .inner { margin-left:-100%; }
#slide8:checked ~ #slides .inner { margin-left:-200%; }
#slide9:checked ~ #slides .inner { margin-left:-300%; }
#slide10:checked ~ #slides .inner { margin-left:-400%; }

#overflow {
	width: 100%;
	overflow: hidden;
}

article img {
	width: 100%;
}

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

#slides article {
	width: 20%;
	float: left;
}

/* Slider Styling */

/* Control Setup */

#controls {
	margin: -45% 0 0 0;
	width: 100%;
	height: 50px;
}

#controls label { 
	display: none;
	width: 60px;
	height: 60px;
	opacity: 0.3;
}

#active {
	margin: 23% 0 0;
	text-align: center;
}

#active label {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	display: inline-block;
	width: 10px;
	height: 10px;
	background: #f90;
}

#active label:hover {
	background: #ccc;
	border-color: #777 !important;
}

#controls label:hover {
	opacity: 0.8;
}

#slide1:checked ~ #controls label:nth-child(2), 
#slide2:checked ~ #controls label:nth-child(3), 
#slide3:checked ~ #controls label:nth-child(4), 
#slide4:checked ~ #controls label:nth-child(5), 
#slide5:checked ~ #controls label:nth-child(1)

#slide6:checked ~ #controls label:nth-child(7), 
#slide7:checked ~ #controls label:nth-child(8), 
#slide8:checked ~ #controls label:nth-child(9), 
#slide9:checked ~ #controls label:nth-child(10), 
#slide10:checked ~ #controls label:nth-child(6)
{
	background: url(galleryview/css/themes/dark/panel-next-big.png) no-repeat;
	float: right;
	margin: 0 0 0 0;
	display: block;
	
}
#slide1:checked ~ #controls label:nth-child(5),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4),

#slide6:checked ~ #controls label:nth-child(10),
#slide7:checked ~ #controls label:nth-child(6),
#slide8:checked ~ #controls label:nth-child(7),
#slide9:checked ~ #controls label:nth-child(8),
#slide10:checked ~ #controls label:nth-child(9)
 {
	background:  url(galleryview/css/themes/dark/panel-prev-big.png) no-repeat;
	float: left;
	margin: 0 0 0 0px;
	display: block;
}

#slide1:checked ~ #active label:nth-child(1),
#slide2:checked ~ #active label:nth-child(2),
#slide3:checked ~ #active label:nth-child(3),
#slide4:checked ~ #active label:nth-child(4),
#slide5:checked ~ #active label:nth-child(5),

#slide6:checked ~ #active label:nth-child(6),
#slide7:checked ~ #active label:nth-child(7),
#slide8:checked ~ #active label:nth-child(8),
#slide9:checked ~ #active label:nth-child(9),
#slide10:checked ~ #active label:nth-child(10)

 {
	background: #333;
	border-color: #333 !important;
}

/* Animation */

#slides .inner {
	-webkit-transform: translateZ(0);
	-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
	-moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
         -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
       -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
        transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */

	-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
	-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
     -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
        transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}

#slider {
	-webkit-transform: translateZ(0);
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

#controls label{
	-webkit-transform: translateZ(0);
	-webkit-transition: opacity 0.2s ease-out;
	-moz-transition: opacity 0.2s ease-out;
	-o-transition: opacity 0.2s ease-out;
	transition: opacity 0.2s ease-out;
}

#slide1:checked ~ #slides article:nth-child(1) .info,
#slide2:checked ~ #slides article:nth-child(2) .info,
#slide3:checked ~ #slides article:nth-child(3) .info,
#slide4:checked ~ #slides article:nth-child(4) .info,
#slide5:checked ~ #slides article:nth-child(5) .info,

#slide6:checked ~ #slides article:nth-child(6) .info,
#slide7:checked ~ #slides article:nth-child(7) .info,
#slide8:checked ~ #slides article:nth-child(8) .info,
#slide9:checked ~ #slides article:nth-child(9) .info,
#slide10:checked ~ #slides article:nth-child(10) .info
 {
	opacity: 1;
	-webkit-transition: all 1s ease-out 0.6s;
	-moz-transition: all 1s ease-out 0.6s;
	-o-transition: all 1s ease-out 0.6s;
	transition: all 1s ease-out 0.6s;
}

.info, #controls, #slides, #active, #active label, .info h3, .desktop, .tablet, .mobile {
	-webkit-transform: translateZ(0);
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}
Sujet clos
Aller à