11499 sujets

JavaScript, DOM et API Web HTML5

Slider

salut,
je suis en train de créer un site web et j'ai envie de metre un slider.Mais voilà!Je n'ai pas le temps d'aprender le javascript Smiley bawling Smiley nimp .Voici ce que j'ai déjà fais avec html5 et css3

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<link rel="stylesheet" href="baniere_evenement_style.css" />
	</head>
	<body>
		<div class="baniere_evenement">
			<div class="evenement">
				<div class="afficher" id="evenement1" >
					<div class="precedant">
						<a class="prev" href="#evenement7">0</a>
					</div>
					<div class="slide"> 
						<a href="#">
						
						<p>
						<img src="01_charming.jpg" class="image"/>
						</p>
						<p>
						Ya t-il plein d'erreur?!!!! !!!!!!!! !!!!!!! 
						!!!!!!!!!!!!! !!!!!!!!!! !!!!!!  !!!!!!!! !!!!!! !!!!!!! !!!!!!!! !!!!!!!
						</p>
					</a>
					</div>
					
					<div class="suivant">
						<a class="next" href="#evenement2">1</a>
					</div>
				</div>
				<div class="afficher" id="evenement2" >
					<div class="precedant">
						<a class="prev" href="#evenement1">0</a>
					</div>
					<div class="slide">
					<a href="#">
						
						<p>
						<img src="02_charming.jpg" class="image"/>
						</p>
						<p>
						Aidez mois à completer ce code!!! !!!!!! !!! !!!!!!!!!!! !!!!!!! !!!!!! !!!!!!!! !!!!!!! !!!!! !!!!!!!!
						!!!!!!!!
						</p>
					</a>
					</div>
					
					<div class="suivant">
						<a  class="next" href="#evenement3">1</a>
					</div>
				</div>
				<div class="afficher" id="evenement3" >
					<div class="precedant">
						<a class="prev" href="#evenement2">0</a>
					</div>
					<div class="slide">
					<a href="#">
						
						<p>
						<img src="03_charming.jpg" class="image"/>
						</p>
						<p> 
					S'il vous plait!!!!!! !!!!! !!!!! !!!!! !!! !!!!! !!! !!!!!!!! !!!!!!!!!! !!!!
					!!!! !!!!!!!!! !!!! !!!!!!! !!!! !!!!!!! !!!!! !!!!!
						</p>
					</a>
					</div>
					
					<div class="suivant">
						<a class="next" href="#evenement4">1</a>
					</div>
				</div>
				<div class="afficher" id="evenement4" >
					<div class="precedant">
						<a class="prev" href="#evenement3">0</a>
					</div>
					<div class="slide">
					<a href="#">
						
						<p>
						<img src="04_charming.jpg" class="image"/>
						</p>
						<p>
						Je sais vous ne résistez pas!!! !! !!!! !!! !!!! !!!!! !!!!! !!!!! !!!! !!!!!! !!!! !!!!!
						</p>
					</a>
					</div>
					
					<div class="suivant">
						<a class="next" href="#evenement5">1</a>
					</div>
				</div>
				<div class="afficher" id="evenement5" >
					<div class="precedant">
						<a class="prev" href="#evenement4">0</a>
					</div>
					<div class="slide">
					<a href="#">
						
						<p>
						<img src="05_charming.jpg" class="image"/>
						</p>
						<p>
						Ainsi sont toutes les photo que j'ai prise !!!!!! !!!!!! !!!!! !!!!! !!!!
						</p>
					</a>
					</div>
					
					<div class="suivant">
						<a class="next" href="#evenement6">1</a>
					</div>
				</div>
				<div class="afficher" id="evenement6" >
					<div class="precedant">
						<a class="prev" href="#evenement5">0</a>
					</div>
					<div class="slide">
					<a href="#">
						
						<p>
						<img src="06_charming.jpg" class="image"/>
						</p>
						<p>
						Belle photo n'est-ce pas? eh bien je l'ai prise!!!!!! !!!!! !!!!!!!!!! !!! !!!!! !!!!!! !! !!!! !!! !!!!!!!
						</p>
					</a>
					</div>
					
					<div class="suivant">
						<a class="next" href="#evenement7">1</a>
					</div>
				</div>
				<div class="afficher" id="evenement7" >
					<div class="precedant">
						<a class="prev" href="#evenement6">0</a>
					</div>
					<div class="slide">
					<a href="#">
						
						<p>
						<img src="07_charming.jpg" class="image"/>
						</p>
						<p>
						TRRès TRès tRè tRRRRR RRRR RRRRRR RRRRR RRRRR RRRRRes 
						joli !!!!!!! !!! !!!!!! !!!!!!! !!!!! !!!!!!!! !!!!!!! !!!!! !!!!!!!! !!!!!!
						</p>
					</a>
					</div>
					
					<div class="suivant">
						<a class="next" href="#evenement1">1</a>
					</div>
					
				</div>
			</div>
			<div class="pagination">
				<ul id="pagination">
					<li><a href="#evenement1">1</a></li>
					<li><a href="#evenement2">2</a></li>
					<li><a href="#evenement3">3</a></li>
					<li><a href="#evenement4">4</a></li>
					<li><a href="#evenement5">5</a></li>
					<li><a href="#evenement6">6</a></li>
					<li><a href="#evenement7">7</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>



.evenement
{
width:100%;
height:300px;
overflow:hidden;
 text-align: center;
}
.precedant , .slide , .suivant
{
display:inline-block;
vertical-align:top;
}
.slide
{
width:800px;
height:300px;
overflow:hidden;
 text-align: center;
 border:2px black solid;
 margin-bottom:10px;
 padding:5px;
}
.precedant
{

width:30px;
height:40px;
color:none;
margin-top:150px;
position:relative;
left:-180px;
}
.suivant
{

width:30px;
height:40px;
margin-top:150px;
position:relative;
right:-180px;
}
.prev
{
width:30px;
height:40px;
font-size:3em;
color:transparent;
background:url("leftNavOFF.png") no-repeat;
}
.next
{
background:url("rightNavOFF.png") no-repeat;
width:30px;
height:40px;
font-size:3em;
color:transparent;
}
.next:hover
{
background:url("rightNavON.png") no-repeat;
}
.prev:hover
{
background:url("leftNavON.png") no-repeat;
}
.image
{
float:left;
}   
.pagination
{

text-align:center;


}
.pagination li
{
list-style-type:none;
display:inline-block;
width:30px;
height:30px;
overflow:hidden;
}

.pagination li a
{
background:url("bottomNavOFF.png") no-repeat;
font-size:3em;
width:30px;
height:30px;
color:transparent;
}
.pagination li a:hover,.pagination li a:active
{
background:url("bottomNavON.png") no-repeat;
}

Aidez moi svp .N'hesitez pas à corriger mes erreurs. Smiley fatigue
Merci d'avance.
Sujet clos
Aller à