Bonjour à tous !
Je ne sais pas si je suis dans le bon forum, toujours est-il que j'aurais besoin de vos lumières pour m'éclairer.
Je cherche à faire un "slideshow", dans le même type que celui-ci : http://madeuplife.forumactif.org/t47-modele-de-presentation
Malheureusement, et après de longues heures de recherche, mon code ne me donne toujours pas le résultat attendu...
Merci à ceux qui pourront m'aider !
Modifié par versailles (23 Jan 2016 - 14:22)
Je ne sais pas si je suis dans le bon forum, toujours est-il que j'aurais besoin de vos lumières pour m'éclairer.
Je cherche à faire un "slideshow", dans le même type que celui-ci : http://madeuplife.forumactif.org/t47-modele-de-presentation
Malheureusement, et après de longues heures de recherche, mon code ne me donne toujours pas le résultat attendu...
<div id="slideshow">
<div id="s1">
<div id="s2">
<center><a class="next next1" href="#s2" id="lien">FT. SARAH BOLGER</a></center>
<center><a class="prev prev2" href="#s1" id="lien">RETOUR</a></center>
<div id="sContent">
dhsfbhsjfhsj
</div>
</div>
</div>
</div>
<style>
#lien{
color:#FFFFFF;
padding-top:220px;
padding-left:13%;
padding-right:13%;
}
#slideshow {
position: relative;
width: 200px;
height: 300px;
margin: 30px;
overflow: hidden;
background-image:url("http://img11.hostingpics.net/pics/733365large.jpg");
}
#sContent {
position: absolute;
opacity:0.5;
width: 200px;
height: 300px;
background-color:#FFFFFF;
top: 0;
left: 0;
width: 300px;
margin: 0;
padding: 0;
z-index: 10;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
#sContent li {
display: inline;
}
#slideshow .next, #slideshow .prev {
position: absolute;
top: 65px;
z-index: 20;
}
#slideshow .prev { left: 0; }
#slideshow .next { right: 0; }
#slideshow .next, #slideshow .prev { display: none; }
#slideshow .next1 { display: block; }
#s1:target #sContent { left: 0px; }
#s1:target .next, #s1:target .prev { display: none; }
#s1:target .next1 { display: block; }
#s2:target #sContent { top: 100%; }
#s2:target .next, #s2:target .prev { display: none; }
#s2:target .next2, #s2:target .prev2 { display: block; }
</style>
Merci à ceux qui pourront m'aider !
Modifié par versailles (23 Jan 2016 - 14:22)