11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'aimerais commencer à réaliser un slideshow, mes flèches sont positionnées, elles détectent la gauche et la droite. En revanche quand je clique vers la droite pour passer à la seconde image cela ne fonctionne pas.

Ce serait vraiment sympa si quelqu'un pouvait m'aider Smiley smile

<html>
<body>
<!-- CONTAINER -->      
  
<div id="container">
      <div class="project" style="position: relative; z-index:1;">
                  
      <div class="slideshow_component" rel="started" id="slideshow_component_8962324_0" style="height: 1184px; width: 1579px;">
              
      <div class="slideshow_nav above" id="slideshow_nav_8962324_0">
    <a id="prev_8962324_0" class="slide_prev_8962324 slide_prev" href="#"></a>
    <span class="slide_slash"></span>
    <a id="next_8962324_0" class="slide_next_8962324 slide_next" href="#"></a>
       </div>
                          
                          
        <div class="slideshow_wrapper" id="slideshow_wrapper_8962324_0" style="width: 1579px; height: 1184px;">
        <a href="#" id="slideclick_8962324_0"  class="slideclick">
                                               <div class="slideshow_container" id="slideshow_container_8962324_0" style="height: 1184px; position: relative; width: 1579px;">
                          
       <img src="../images/skopia/skopia01.png">
       <img src="../images/skopia/skopia02.png">
                          
</div>
                            <!-- close slideshow_container -->
</a> <!-- close slideclick -->
  
</div>
</div>
</div>
                  
                  
       <div class="project" style="position: relative;z-index:1;">
        <div id="texte">
                <br>SKOPIA
                <p>
                Site web + application
        </div>
       </div>
                                  
          
</div>
         
        <script type="text/javascript" src="/_jsapps/_libs/cargo.rail.package.js"></script>
        <script type="text/javascript" src="/_jsapps/rail/rail.app.js"></script>
        <script type="text/javascript" src="/_jsapps/rail/rail.jquery.js"></script>
          
         
          
  
</body>
</html>



.portfolio {
margin: 90px 50px;
text-align:center;
}
  
.work {
display:inline-block;
vertical-align: top;
position:relative;
z-index:1;
margin:-3.5px;
}
  
#container {
margin-top: 50px;
margin-bottom:100px;
color:#000;
}
  
.project {
display:block;
margin:auto;
padding-top:50px;
position:relative;
z-index:1;
max-width:1000px;
  
}
  
  
#texte{
border-top:1px solid #000;
height:35px;
text-align:center;
line-height:20px;
}
  
img{
    max-width:100%;
    height:auto;
}
  
iframe{
    max-width:100%;
}
  
  
  
.slideshow_component {
position: relative;
min-height: 10px;
margin: 0 15px 0 0;
z-index: 99;
}
  
div {
display: block;
}
  
.slideshow_nav {
color: #000;
}
  
.slideshow_nav a {
color: #000;
text-decoration: none;
}
  
.slideshow_clash {
color: #000;
text-decoration: none;
}
  
.slide_prev {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 50%;
cursor: url("http://i.imgur.com/2yjgTTg.png"), auto;
z-index: 99999;
background: none!important;
}
  
.slide_next {
display: block;
right: 0;
width: 50%;
position: absolute;
top: 0;
bottom: 0;
cursor: url("http://i.imgur.com/jus5QnD.png"), auto;
z-index: 99999;
background: none!important;
}
  
.slideshow_wrapper {
clear: both;
padding: 0;
}
  
user agent stylesheetdiv {
display: block;
}
  
.slideshow_wrapper a, .slideshow_wrapper a:hover, .slideshow_wrapper a:active {
background: none !important;
    
}
user agent stylesheeta:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
  
element.style {
position: relative;
}
Bonjour,

Il manque un peu de javascript ici, donc on ne voit pas ton appel au slideshow (et on ne sait même pas lequel tu utilises).