Problème intégration carousel 3D dans site web

Résolu
Bonjour,

je cherche à intégrer le carousel suivant :

http://oyeharry.github.io/image-carousel-3d/

https://github.com/oyeharry/image-carousel-3d

dans mon site.

Problème : j'obtiens bien la barre de défilement et les titres mais aucune image ni animation.

J'oublie certainement quelque chose dans le code, avez-vous une idée ?

Merci.

Configuration: Windows / Chrome 86.0.4240.198

5 réponses

  1. Bonjour,

    bon, je ne suis pas sûre d'avoir tout compris, ça reste un peu du chinois pour moi, mais grâce à ton aide, ça marche.

    Merci encore Jordane45 :)
    1. Bonjour,

      voici le code :

      <!doctype html>
      <!--[if lt IE 7]>
      	<html class="no-js lt-ie9 lt-ie8 lt-ie7 lt-ie10">
      <![endif]-->
      <!--[if IE 7]> 
      	<html class="no-js lt-ie9 lt-ie8 lt-ie10">
      <![endif]-->
      <!--[if IE 8]>
      	<html class="no-js lt-ie9 lt-ie10">
      <![endif]-->
      <!--[if IE 9]>
      	<html class="no-js lt-ie10">
      <![endif]-->
      <!--[if gt IE 9]><!-->
      <html class="no-js" lang="en-us">
      	<!--<![endif]-->
      
      <head>
      	<title>Image Carousel 3D</title>
      	
      	<script src="//use.edgefonts.net/abel.js"></script>    
          <link rel="stylesheet" type="text/css" href="../build/files/image-carousel-3d.css">
          
          
      	<style type="text/css">	
      	body {
      	background-color: #000;
      	margin: 0px;	
          }
      
      </style>
      </head>
      
      <body>
      
          <div id="imgCarousel3d">
              
            <div class="title-container">
              <p><span>Image Carousel 3D</span></p>
            </div>
      
      	      <div class="imgs-container">
      
      
      	          <div class="imgs" id="nature">
                     
      	           <div class="img-container">
      		      	 <div class="img-content">
      		      	   <a href="http://www.google.com" target="_blank" class="img-link" data-click-track="NF//ps-playstation-plus_">
      		      	     <img class="main-img" data-src="../build/assets/nature-1.jpg" alt="Image Name 1" title="Image Name 1">	
      		      	     <div class="img-info">		      	     	 
      		      	     	 <div class="title"><strong>Image Name 1</strong></div>
      		      	     	 <div class="sub-title"><strong>Image Subtitle</strong></div>
      		      	     	 
      		      	     </div>      	      
      		      	   </a>   
      		      	  
      	      	     </div>
      		      	   <div class="img-ref">
      		      	     <img class="main-img" data-src="../build/assets/nature-1.jpg" src="../build/assets/nature-1.jpg">	
      		      	   </div>
      		      	</div>  
      	           <div class="img-container">
      		      	 <div class="img-content">
      		      	   <a href="http://www.google.com" target="_blank" class="img-link" data-click-track="NF//ps-playstation-plus_">
      		      	     <img class="main-img" data-src="../build/assets/nature-2.jpg" alt="Image Name 2" title="Image Name 2">	
      		      	     <div class="img-info">		      	     	 
      		      	     	 <div class="title"><strong>Image Name 2</strong></div>
      		      	     	 <div class="sub-title"><strong>Image Subtitle</strong></div>
      		      	     	 
      		      	     </div>      	      
      		      	   </a>   
      		      	  
      	      	     </div>
      		      	   <div class="img-ref">
      		      	     <img class="main-img" data-src="../build/assets/nature-2.jpg" src="../build/assets/nature-2.jpg">	
      		      	   </div>
      		      	</div>  
      	           <div class="img-container">
      		      	 <div class="img-content">
      		      	   <a href="http://www.google.com" target="_blank" class="img-link" data-click-track="NF//ps-playstation-plus_">
      		      	     <img class="main-img" data-src="../build/assets/nature-3.jpg" alt="Image Name 3" title="Image Name 3">	
      		      	     <div class="img-info">		      	     	 
      		      	     	 <div class="title"><strong>Image Name 3</strong></div>
      		      	     	 <div class="sub-title"><strong>Image Subtitle</strong></div>
      		      	     	 
      		      	     </div>      	      
      		      	   </a>   
      		      	  
      	      	     </div>
      		      	   <div class="img-ref">
      		      	     <img class="main-img" data-src="../build/assets/nature-3.jpg" src="../build/assets/nature-3.jpg">	
      		      	   </div>
      		      	</div>  
      	           <div class="img-container">
      		      	 <div class="img-content">
      		      	   <a href="http://www.google.com" target="_blank" class="img-link" data-click-track="NF//ps-playstation-plus_">
      		      	     <img class="main-img" data-src="../build/assets/nature-4.jpg" alt="Image Name 4" title="Image Name 4">	
      		      	     <div class="img-info">		      	     	 
      		      	     	 <div class="title"><strong>Image Name 4</strong></div>
      		      	     	 <div class="sub-title"><strong>Image Subtitle3</strong></div>
      		      	     	 
      		      	     </div>      	      
      		      	   </a>   
      		      	  
      	      	     </div>
      		      	   <div class="img-ref">
      		      	     <img class="main-img" data-src="../build/assets/nature-4.jpg" src="../build/assets/nature-4.jpg">	
      		      	   </div>
      		      	</div>  
      	           <div class="img-container">
      		      	 <div class="img-content">
      		      	   <a href="http://www.google.com" target="_blank" class="img-link" data-click-track="NF//ps-playstation-plus_">
      		      	     <img class="main-img" data-src="../build/assets/nature-5.jpg" alt="Image Name 5" title="Image Name 5">	
      		      	     <div class="img-info">		      	     	 
      		      	     	 <div class="title"><strong>Image Name 5</strong></div>
      		      	     	 <div class="sub-title"><strong>Image Subtitle</strong></div>
      		      	     	 
      		      	     </div>      	      
      		      	   </a>   
      		      	  
      	      	     </div>
      		      	   <div class="img-ref">
      		      	     <img class="main-img" data-src="../build/assets/nature-5.jpg" src="../build/assets/nature-5.jpg">	
      		      	   </div>
      		      	</div>  
      	           <div class="img-container">
      		      	 <div class="img-content">
      		      	   <a href="http://www.google.com" target="_blank" class="img-link" data-click-track="NF//ps-playstation-plus_">
      		      	     <img class="main-img" data-src="../build/assets/nature-6.jpg" alt="Image Name 6" title="Image Name 6">	
      		      	     <div class="img-info">		      	     	 
      		      	     	 <div class="title"><strong>Image Name 6</strong></div>
      		      	     	 <div class="sub-title"><strong>Image Subtitle</strong></div>
      		      	     	 
      		      	     </div>      	      
      		      	   </a>   
      		      	  
      	      	     </div>
      		      	   <div class="img-ref">
      		      	     <img class="main-img" data-src="../build/assets/nature-6.jpg" src="../build/assets/nature-6.jpg">	
      		      	   </div>
      		      	</div>  
      	      	
      	      	 </div>   
      
      
      	          <div class="imgs" id="wild-life">
                     
      	           <div class="img-container">
      		      	 <div class="img-content">
      		      	   <a href="http://www.google.com" target="_blank" class="img-link" data-click-track="NF//ps-playstation-plus_">
      		      	     <img class="main-img" data-src="../build/assets/wild-1.jpg" alt="Image Name 1" title="Image Name 1">	
      		      	     <div class="img-info">		      	     	 
      		      	     	 <div class="title"><strong>Image Name 1</strong></div>
      		      	     	 <div class="sub-title"><strong>Image Subtitle</strong></div>
      		      	     	 
      		      	     </div>      	      
      		      	   </a>   
      		      	  
      	      	     </div>
      		      	   <div class="img-ref">
      		      	     <img class="main-img" data-src="../build/assets/wild-1.jpg" src="../build/assets/wild-1.jpg">	
      		      	   </div>
      		      	</div>  
      	           <div class="img-container">
      		      	 <div class="img-content">
      		      	   <a href="http://www.google.com" target="_blank" class="img-link" data-click-track="NF//ps-playstation-plus_">
      		      	     <img class="main-img" data-src="../build/assets/wild-2.jpg" alt="Image Name 2" title="Image Name 2">	
      		      	     <div class="img-info">		      	     	 
      		      	     	 <div class="title"><strong>Image Name 2</strong></div>
      		      	     	 <div class="sub-title"><strong>Image Subtitle</strong></div>
      		      	     	 
      		      	     </div>      	      
      		      	   </a>   
      		      	  
      	      	     </div>
      		      	   <div class="img-ref">
      		      	     <img class="main-img" data-src="../build/assets/wild-2.jpg" src="../build/assets/wild-2.jpg">	
      		      	   </div>
      		      	</div>  
      	           <div class="img-container">
      		      	 <div class="img-content">
      		      	   <a href="http://www.google.com" target="_blank" class="img-link" data-click-track="NF//ps-playstation-plus_">
      		      	     <img class="main-img" data-src="../build/assets/wild-3.jpg" alt="Image Name 3" title="Image Name 3">	
      		      	     <div class="img-info">		      	     	 
      		      	     	 <div class="title"><strong>Image Name 3</strong></div>
      		      	     	 <div class="sub-title"><strong>Image Subtitle</strong></div>
      		      	     	 
      		      	     </div>      	      
      		      	   </a>   
      		      	  
      	      	     </div>
      		      	   <div class="img-ref">
      		      	     <img class="main-img" data-src="../build/assets/wild-3.jpg" src="../build/assets/wild-3.jpg">	
      		      	   </div>
      		      	</div>  
      	           <div class="img-container">
      		      	 <div class="img-content">
      		      	   <a href="http://www.google.com" target="_blank" class="img-link" data-click-track="NF//ps-playstation-plus_">
      		      	     <img class="main-img" data-src="../build/assets/wild-4.jpg" alt="Image Name 4" title="Image Name 4">	
      		      	     <div class="img-info">		      	     	 
      		      	     	 <div class="title"><strong>Image Name 4</strong></div>
      		      	     	 <div class="sub-title"><strong>Image Subtitle3</strong></div>
      		      	     	 
      		      	     </div>      	      
      		      	   </a>   
      		      	  
      	      	     </div>
      		      	   <div class="img-ref">
      		      	     <img class="main-img" data-src="../build/assets/wild-4.jpg" src="../build/assets/wild-4.jpg">	
      		      	   </div>
      		      	</div>  
      	           <div class="img-container">
      		      	 <div class="img-content">
      		      	   <a href="http://www.google.com" target="_blank" class="img-link" data-click-track="NF//ps-playstation-plus_">
      		      	     <img class="main-img" data-src="../build/assets/wild-5.jpg" alt="Image Name 5" title="Image Name 5">	
      		      	     <div class="img-info">		      	     	 
      		      	     	 <div class="title"><strong>Image Name 5</strong></div>
      		      	     	 <div class="sub-title"><strong>Image Subtitle</strong></div>
      		      	     	 
      		      	     </div>      	      
      		      	   </a>   
      		      	  
      	      	     </div>
      		      	   <div class="img-ref">
      		      	     <img class="main-img" data-src="../build/assets/wild-5.jpg" src="../build/assets/wild-5.jpg">	
      		      	   </div>
      		      	</div>  
      	           <div class="img-container">
      		      	 <div class="img-content">
      		      	   <a href="http://www.google.com" target="_blank" class="img-link" data-click-track="NF//ps-playstation-plus_">
      		      	     <img class="main-img" data-src="../build/assets/wild-6.jpg" alt="Image Name 5" title="Image Name 5">	
      		      	     <div class="img-info">		      	     	 
      		      	     	 <div class="title"><strong>Image Name 5</strong></div>
      		      	     	 <div class="sub-title"><strong>Image Subtitle</strong></div>
      		      	     	 
      		      	     </div>      	      
      		      	   </a>   
      		      	  
      	      	     </div>
      		      	   <div class="img-ref">
      		      	     <img class="main-img" data-src="../build/assets/wild-6.jpg" src="../build/assets/wild-6.jpg">	
      		      	   </div>
      		      	</div>  
      	           <div class="img-container">
      		      	 <div class="img-content">
      		      	   <a href="http://www.google.com" target="_blank" class="img-link" data-click-track="NF//ps-playstation-plus_">
      		      	     <img class="main-img" data-src="../build/assets/wild-7.jpg" alt="Image Name 5" title="Image Name 5">	
      		      	     <div class="img-info">		      	     	 
      		      	     	 <div class="title"><strong>Image Name 5</strong></div>
      		      	     	 <div class="sub-title"><strong>Image Subtitle</strong></div>
      		      	     	 
      		      	     </div>      	      
      		      	   </a>   
      		      	  
      	      	     </div>
      		      	   <div class="img-ref">
      		      	     <img class="main-img" data-src="../build/assets/wild-7.jpg" src="../build/assets/wild-7.jpg">	
      		      	   </div>
      		      	</div>  
      	           <div class="img-container">
      		      	 <div class="img-content">
      		      	   <a href="http://www.google.com" target="_blank" class="img-link" data-click-track="NF//ps-playstation-plus_">
      		      	     <img class="main-img" data-src="../build/assets/wild-8.jpg" alt="Image Name 5" title="Image Name 5">	
      		      	     <div class="img-info">		      	     	 
      		      	     	 <div class="title"><strong>Image Name 5</strong></div>
      		      	     	 <div class="sub-title"><strong>Image Subtitle</strong></div>
      		      	     	 
      		      	     </div>      	      
      		      	   </a>   
      		      	  
      	      	     </div>
      		      	   <div class="img-ref">
      		      	     <img class="main-img" data-src="../build/assets/wild-8.jpg" src="../build/assets/wild-8.jpg">	
      		      	   </div>
      		      	</div>  
      	      	
      	      	 </div>   
      
      
      	          <div class="imgs" id="fields">
                     
      	           <div class="img-container">
      		      	 <div class="img-content">
      		      	   <a href="http://www.google.com" target="_blank" class="img-link" data-click-track="NF//ps-playstation-plus_">
      		      	     <img class="main-img" data-src="../build/assets/fields-1.jpg" alt="Image Name 1" title="Image Name 1">	
      		      	     <div class="img-info">		      	     	 
      		      	     	 <div class="title"><strong>Image Name 1</strong></div>
      		      	     	 <div class="sub-title"><strong>Image Subtitle</strong></div>
      		      	     	 
      		      	     </div>      	      
      		      	   </a>   
      		      	  
      	      	     </div>
      		      	   <div class="img-ref">
      		      	     <img class="main-img" data-src="../build/assets/fields-1.jpg" src="../build/assets/fields-1.jpg">	
      		      	   </div>
      		      	</div>  
      	           <div class="img-container">
      		      	 <div class="img-content">
      		      	   <a href="http://www.google.com" target="_blank" class="img-link" data-click-track="NF//ps-playstation-plus_">
      		      	     <img class="main-img" data-src="../build/assets/fields-2.jpg" alt="Image Name 2" title="Image Name 2">	
      		      	     <div class="img-info">		      	     	 
      		      	     	 <div class="title"><strong>Image Name 2</strong></div>
      		      	     	 <div class="sub-title"><strong>Image Subtitle</strong></div>
      		      	     	 
      		      	     </div>      	      
      		      	   </a>   
      		      	  
      	      	     </div>
      		      	   <div class="img-ref">
      		      	     <img class="main-img" data-src="../build/assets/fields-2.jpg" src="../build/assets/fields-2.jpg">	
      		      	   </div>
      		      	</div>  
      	           <div class="img-container">
      		      	 <div class="img-content">
      		      	   <a href="http://www.google.com" target="_blank" class="img-link" data-click-track="NF//ps-playstation-plus_">
      		      	     <img class="main-img" data-src="../build/assets/fields-3.jpg" alt="Image Name 3" title="Image Name 3">	
      		      	     <div class="img-info">		      	     	 
      		      	     	 <div class="title"><strong>Image Name 3</strong></div>
      		      	     	 <div class="sub-title"><strong>Image Subtitle</strong></div>
      		      	     	 
      		      	     </div>      	      
      		      	   </a>   
      		      	  
      	      	     </div>
      		      	   <div class="img-ref">
      		      	     <img class="main-img" data-src="../build/assets/fields-3.jpg" src="../build/assets/fields-3.jpg">	
      		      	   </div>
      		      	</div>  
      	           <div class="img-container">
      		      	 <div class="img-content">
      		      	   <a href="http://www.google.com" target="_blank" class="img-link" data-click-track="NF//ps-playstation-plus_">
      		      	     <img class="main-img" data-src="../build/assets/fields-4.jpg" alt="Image Name 4" title="Image Name 4">	
      		      	     <div class="img-info">		      	     	 
      		      	     	 <div class="title"><strong>Image Name 4</strong></div>
      		      	     	 <div class="sub-title"><strong>Image Subtitle3</strong></div>
      		      	     	 
      		      	     </div>      	      
      		      	   </a>   
      		      	  
      	      	     </div>
      		      	   <div class="img-ref">
      		      	     <img class="main-img" data-src="../build/assets/fields-4.jpg" src="../build/assets/fields-4.jpg">	
      		      	   </div>
      		      	</div>  
      	           <div class="img-container">
      		      	 <div class="img-content">
      		      	   <a href="http://www.google.com" target="_blank" class="img-link" data-click-track="NF//ps-playstation-plus_">
      		      	     <img class="main-img" data-src="../build/assets/fields-5.jpg" alt="Image Name 5" title="Image Name 5">	
      		      	     <div class="img-info">		      	     	 
      		      	     	 <div class="title"><strong>Image Name 5</strong></div>
      		      	     	 <div class="sub-title"><strong>Image Subtitle</strong></div>
      		      	     	 
      		      	     </div>      	      
      		      	   </a>   
      		      	  
      	      	     </div>
      		      	   <div class="img-ref">
      		      	     <img class="main-img" data-src="../build/assets/fields-5.jpg" src="../build/assets/fields-5.jpg">	
      		      	   </div>
      		      	</div>  
      	           <div class="img-container">
      		      	 <div class="img-content">
      		      	   <a href="http://www.google.com" target="_blank" class="img-link" data-click-track="NF//ps-playstation-plus_">
      		      	     <img class="main-img" data-src="../build/assets/fields-6.jpg" alt="Image Name 5" title="Image Name 5">	
      		      	     <div class="img-info">		      	     	 
      		      	     	 <div class="title"><strong>Image Name 5</strong></div>
      		      	     	 <div class="sub-title"><strong>Image Subtitle</strong></div>
      		      	     	 
      		      	     </div>      	      
      		      	   </a>   
      		      	  
      	      	     </div>
      		      	   <div class="img-ref">
      		      	     <img class="main-img" data-src="../build/assets/fields-6.jpg" src="../build/assets/fields-6.jpg">	
      		      	   </div>
      		      	</div>  
      	           <div class="img-container">
      		      	 <div class="img-content">
      		      	   <a href="http://www.google.com" target="_blank" class="img-link" data-click-track="NF//ps-playstation-plus_">
      		      	     <img class="main-img" data-src="../build/assets/fields-7.jpg" alt="Image Name 5" title="Image Name 5">	
      		      	     <div class="img-info">		      	     	 
      		      	     	 <div class="title"><strong>Image Name 5</strong></div>
      		      	     	 <div class="sub-title"><strong>Image Subtitle</strong></div>
      		      	     	 
      		      	     </div>      	      
      		      	   </a>   
      		      	  
      	      	     </div>
      		      	   <div class="img-ref">
      		      	     <img class="main-img" data-src="../build/assets/fields-7.jpg" src="../build/assets/fields-7.jpg">	
      		      	   </div>
      		      	</div>  
      	           <div class="img-container">
      		      	 <div class="img-content">
      		      	   <a href="http://www.google.com" target="_blank" class="img-link" data-click-track="NF//ps-playstation-plus_">
      		      	     <img class="main-img" data-src="../build/assets/fields-8.jpg" alt="Image Name 5" title="Image Name 5">	
      		      	     <div class="img-info">		      	     	 
      		      	     	 <div class="title"><strong>Image Name 5</strong></div>
      		      	     	 <div class="sub-title"><strong>Image Subtitle</strong></div>
      		      	     	 
      		      	     </div>      	      
      		      	   </a>   
      		      	  
      	      	     </div>
      		      	   <div class="img-ref">
      		      	     <img class="main-img" data-src="../build/assets/fields-8.jpg" src="../build/assets/fields-8.jpg">	
      		      	   </div>
      		      	</div>  
      	      	
      	      	 </div>   
      
      
      	      </div>
                  
      	      <div class="img-types">
      	      	  <ul>	    
      	      	  	  <li class="imgs-type nature active" data-connect-id="nature"><div>Nature</div></li>	      	  	
      	      	  	  <li class="imgs-type wild-life active" data-connect-id="wild-life"><div>Wild Life</div></li>	      	  	
      	      	  	  <li class="imgs-type fields active" data-connect-id="fields"><div>Fields</div></li>	      	  	
      	      	  </ul>
      	      	  <div class="img-selectbar"></div>
      	      </div>
      
      	      <div class="imgs-scrollbar"><div class="scroller"></div></div>
      	  	  
          </div>
      
          <p>
            <script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>            
            <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/TweenLite.min.js"></script>
            <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/easing/EasePack.min.js"></script>
            <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/plugins/CSSPlugin.min.js"></script>
            <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/utils/Draggable.min.js"></script>
            <script src="http://twitter.github.com/hogan.js/builds/2.0.0/hogan-2.0.0.js"></script>
            
            <script src="../build/files/image-carousel-3d-min.js"></script>
            
            </script>    </p>
          <p>  </p>
      <script type="text/javascript">
      		
           $("#imgCarousel3d").imgCarousel3d();
          
      	</script>
      </body>
      </html>
      


      Merci.
      1. Modérateur
        Le code que tu nous montres est celui de l'exemple .....
        Pour fonctionner, il a besoin du JQUERY
        Le lien utilisé dans l'exemple n'est pas bon .. il manque le "http"
         <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
        
    2. Bonjour,

      en fait, pour le code, j'ai juste fait une page sur dreamweaver avec un titre, 2 paragraphes et le diaporama prévu au-dessus ou au milieu mais je n'y connais pas grand chose en code et je pensais que ce serait simple dans une page si basique d'intégrer ce type de diaporama tout prêt. Je ne vois pas où ça cloche.

      Merci pour votre aide (je ne sais pas trop quelle info vous donner en plus à part les 2 liens déjà mis dans mon message précédent).
      1. Modérateur
        comme je te l'ai dit, il faut que tu me montres le code que tu as réalisé en utilisant le lien que je t'ai donné afin de le poster correctement sur le forum