Impossible d'afficher les photos dans le diaporama CSS

Question

J'ai un code pour un diaporama CSS qui va à gauche et à droite lors du vol stationnaire. Cependant, lorsque je modifie le code pour placer les images dans le diaporama, rien ne s'affiche. This est le diaporama et vous pouvez voir une version de travail dans le coin inférieur gauche de la page here; Cependant, je ne peux pas obtenir le mien pour faire la même chose et charger les images.

HTML:

<div class="all"><div class="trash"></div><div class="buttons"><div class="back"><div class="goleft"></div><div class="container"><div class="textne"><b>[DESCRIPTION]</b></div> 

<a href="[IMAGE LINK]"><div class="imagene"><img src="[IMAGE URL]"></div></a> 

</div></div></div></div><a href="[LINK URL]"><div class="linku"><p>[LINK NAME]</p></div></a> 

CSS:

*{background:none; border:none; margin:0;} 
a.external:after {display:none!important;} 
span.user-symbol {display:none!important;} 
a {font-weight:normal!important;} 
.gr-top{display:none;} 
.gr-top h2 img{display:none;} 
.gr-top h2{display:none;} 
.gr-top span{display:none;} 
.tri{display:none;} 
.gr1{display:none;} 
.gr2{display:none;} 
.gr3{display:none;} 
.commentslink, .prevlink{display:none;} 
.hsep{display:none;} 
.bottom {display:none;} 
.list {display:none;} 


.gr-box{ 
cursor:default; 
z-index:99!important; 
line-height:1.2em; 
font-family:Lucida Console; 
font-size:10px; 
} 

.gr-body, .text{ 
position:relative; 
width:550px; 
overflow:hidden; 
margin:0px auto; 
text-align:center; 
} 

.back{ 
width:500px; 
height:300px; 
background:transparent; 
overflow:hidden; 
margin-left:0px; 
border-left:1px solid #000; 
border-right:1px solid #000; 
border-bottom:1px solid #000; 

} 

.container{ 
width:[CONTAINER WIDTH]px; 
height:300px; 
margin-left:0px; 
text-align:left; 
transition:all 5s linear 360s;} 

.container:hover{ 
margin-left:-[MARGIN]px; 
transition:all 5s linear; 
} 

.goleft { 
position:absolute; 
background:#000; 
opacity:0; 
width:200px; 
height:300px; 
z-index:9999; 
cursor:url(http://orig09.deviantart.net/aa48/f/2015/327/f/2/arrow_by_codingtrash-d9hpzk9.png), auto; } 

.goleft:hover + .container{ 
margin-left:0px; 
transition:all 4s linear; } 

.container u{ 
position:relative; 
display:inline-block; 
text-decoration:none; 
width:100px; 
height:150px; 
overflow:hidden; 
padding:50px 30px; 
text-align:center; } 

.imagene{ 
position:relative; 
display:inline-block; 
background:#777; 
margin-top:8px; 
margin-left:8px; 
height:280px; 
border:1px solid #333; 
transition:all .4s; 
} 

.imagene img{ 
opacity:0.8; 
height:280px; 
transition:all .4s; 
} 

.imagene img:hover{ 
opacity:1; 
} 

.imagene:hover { 
border:1px solid #fff; } 

.textne{ 
position:relative; 
display:inline-block; 
background:#777; 
margin-top:8px; 
width:200px; 
margin-left:8px; 
height:280px; 
border:1px solid #333; 
transition:all .4s; 
} 

.textne b{ 
text-align:center; 
color:white; 
opacity:0.8; 
font-weight: normal; 
position:absolute; 
padding:110px 50px; 
transition:all .4s; 
} 

.trash { 
position:absolute; 
width:500px; 
height:150px; 
background:#999; 
margin-top:75px; 
z-index:-9; 
border:1px solid #000; 
} 

.all { 
margin-left:-10px;} 

.linku{ 
display:inline-block; 
height:30px; 
border:1px solid #000; 
color:#222; 
margin-top:-1px; 
margin-left:-30px; 
text-align:left; 
width:200px; 
background:#999; 
overflow:hidden; 
transition:all .3s; 
} 

.linku:hover { 
background:#888; 
color:#000; 
border:1px solid #fff; 
border-top:1px solid #000; 
} 

.linku p{ 
text-align:center; 
width:200px; 
padding-top:10px; 
transition:all .3s; 
} 

Answer 1

Le code fonctionne très bien. Vous devez inclure les propriétés "width" et "margin" appropriées dans le conteneur et le conteneur: hover rule css

J'ai attaché un lien de violon.

.container{ 
    width: 1700px; 
    height:300px; 
    margin-left:0px; 
    text-align:left; 
    transition:all 5s linear 360s; 
} 
.container:hover{ 
    margin-left:-1015px; 
    transition:all 5s linear; 
} 

https://jsfiddle.net/karthick6891/z9atpexz/

Note: Le carrousel tout dépend beaucoup de valeurs et hardcoded vous devez donner appropriées tailles d'image pour adapter le contenu à l'intérieur. Veuillez regarder dans un carrousel comme carrousel lisse ou carrousel hibou etc,