Bonjour,

J'ai un problème de slider, qui fonctionne parfaitement avec firefox mais pas avec chrome ni safari.Passer d'un slide à l'autre ne fonctionne pas.
Peut être à cause du css ? des pistes ?
Merci pour votre aide !

voici un bout de code, le reste c'est par ici


#creanext {
    background-image: url("../images/flechedroiterond.png");
    background-repeat: no-repeat;
    display: block;
    height: 50px;
    position: absolute;
    right: 10px;
    top: 425px;
    width: 50px;
}



<div id="creations" class="wrap">
<div class="container">
<div id="crealist">
<a id="creaprev" href="#" style="display: none;"></a>
<a id="creanext" href="#"></a>
<div class="scrollable">
<div class="cl"></div>
</div>
</div>
</div>
salut,
quel est le code JS pour afficher tes slides et la structure complète du CSS ton slideshow ? J'ai du mal à me retrouvé.
PS : tu devrais charger tes scripts en dernier pour ne pas ralentir ta page, sans parler du fait qu'alterner des chargement de scripts et de fichiers css désactive le chargement parallèle.
Le code js tu peux le trouver ici

ce qui est bizarre est que les slides des vignettes fonctionnent parfaitement.

Et pour les slides, voici le css
#slide-creations {
    background-image: url('images/bg3.jpg');
    background-repeat: repeat;
}

#creations div.container {
    width: 100%;
    margin: auto;
    padding-top: 180px;
    z-index: 1000;
}

#creadetailprev {
    display: block;
    width: 38px;
    height: 38px;
    background-image: url('../images/flechegaucherond.png');
    position: absolute;
    left: -40px;
    top: 268px;
}
#creadetailnext {
    display: block;
    width: 38px;
    height: 38px;
    background-image: url('../images/flechedroiterond.png');
    position: absolute;
    right: -40px;
    top: 268px;
}

#creadetails {
    height: 500px;
     width: 980px;
    background:#fff;
    position: absolute;
    left: 0;
    top:175px;
    z-index: 1000;
}



#center-slide{
	position:relative;
	width:980px;
	margin:auto;
	padding:0;
	
	}
	
	
#creadetails .close {
    position: absolute;
    top:25px;
    right: 15px;
}

#creaprev {
    display: block;
    width: 50px;
    height: 50px;
    background-image: url('../images/flechegaucherond.png');
	background-repeat:no-repeat;
    position: absolute;
    left: 10px;
    top: 425px;
}
#creanext {
    display: block;
    width: 50px;
    height: 50px;
    background-image: url('../images/flechedroiterond.png');
	background-repeat:no-repeat;
    position: absolute;
    right:10px;
    top: 425px;
}


#crealist a.crea {
    display:block;
    float:left;
    width:155px;
    height: 134px;
}
/*
#crealist a img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    /*filter: gray;
    -webkit-filter: grayscale(100%);
}
#crealist a:hover img {
    filter: none;
    -webkit-filter: grayscale(0%);
}*/
#crealist .scrollable {
    position:relative;
    overflow:hidden;
    width: 100%;
    height:544px;
}
#crealist .scrollable .group {
    width:20000em;
    position:absolute;
    height:544px;
}
#crealist .scrollable .group div.items {
    position: relative;
    float:left;
    width: 942px;
    height:544px;
}
#crealist .scrollable .group div.items div.half {
    width: 942px;
    height: 272px;
}

#creadetailslist {
    width: 850px;
    margin: auto;
}
#creadetailslist .scrollable {
    position:relative;
    overflow:hidden;
    width: 860px;
    height:545px;
}
#creadetailslist .scrollable .group {
    width:20000em;
    position:absolute;
    height:545px;
}
#creadetailslist .scrollable .group div.items {
    position: relative;
    float:left;
    width: 860px;
    height:455px;
    padding-top: 90px;
}
#creadetailslist .scrollable .group div.items div.images {
    float: left;
    width: 500px;
    height: 380px;
    position: relative;
}
#creadetailslist .scrollable .group div.items div.images div.image {
    position: absolute;
    top:0;
    left: 0;
    width: 500px;
    height: 380px;
    overflow: hidden;
    background-color: white;  
}
/*
#creadetailslist .scrollable .group div.items div.images div.image img {
    -webkit-box-shadow:  0px 0px 10px 2px rgba(0, 0, 0, 0.5);
    box-shadow:  0px 0px 10px 2px rgba(0, 0, 0, 0.5);
}
*/
#creadetailslist .gallery_prev,
#creadetailslist .gallery_next {
    display: block;
    width: 20px;
    height: 380px;
    float:left;
    background-image: url('../images/flechegauche.png');
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
#creadetailslist .gallery_next {
    background-image: url('../images/flechedroite.png');
}

#creadetailslist .scrollable .group div.items div.desc {
    float: right;
    width: 300px;
    font-size: 12px;
    font-family: helveticaneuelight, helvetica;
}
#creadetailslist .scrollable .group div.items div.desc p {
    text-align: justify;
}
#creadetailslist .scrollable .group div.items div.desc h2 {
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 30px;
}



Merci pour le conseil !!