Problème d'affichage d'image dans un slider Jquery

Version imprimable

16/07/2012, 16h44
azrael62

1 pièce(s) jointe(s)

Problème d'affichage d'image dans un slider Jquery
Bonjour à tous,
en espérant être sur le bon forum vu que mon script comporte à la fois du css et du javascript mais selon le problème est lié au CSS.
Voilà j'ai téléchargé un script d'un Slider( que vous pourrez trouver à l'adresse suivante http://www.dreamcss.com/2009/04/crea...y-sliders.html )sur le site sur lequel je travaille mais le problème c'est qu'une fois que j'agrandis la taille du conteneur il m'affiche un bout de l'image suivante sur l'image courante excepté pour la dernière.
Je vous ci-joint la capture d'écran pour que vous cernez mieux la problématique.
J'ai aussi testé sans toucher au CSS d'origine juste en agrandissant les images à la taille voulu (ici en 1024x300) et en modifiant la balise suivante
Code:

1 2 3 4 5 6 7 8 9 div#header div#slide-holder div#slide-runner{ top:9px; left:9px; width:1024px; height:300px; overflow:hidden; position:absolute; }
Et le même problème apparaît donc si vous avez une idée de ce qui pourrait générer cette erreur, ça serait sympathique de m'en faire part car j'ai beau creusé là je vois pas.
En vous remerciant d'avance.
16/07/2012, 22h12
NoSmoking

Bonjour,
il semblerait que le conteneur du slide soit plus large que tes images.

1 pièce(s) jointe(s)

Ca serait ça , j'aurais réglé mon problème rapidement.
Je ci-joint l'image originale pour avoir un point de comparaison.
Tu pourras mieux comprendre la nature du problème en modifiant les valeurs suivantes :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
div#header_news div#slide-holder div#slide-runner {
  width : 1024px;
  height : 300px;
  overflow : hidden;
  position : absolute;
}
 
div#header_news div#slide-holder  img {
  margin : 0;
  display : none;
  position : absolute;

par :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
div#header_news div#slide-holder div#slide-runner {
  width : 1024px;
  height : 300px;
  position : absolute;
}
 
div#header_news div#slide-holder  img{
  margin : 0;
  display : none;
  position :relative;
}

17/07/2012, 10h24
azrael62

Problème résolu après divers test jusqu'à ce que je m’aperçoive d'un décalage left:1000px; avec firebug, le problème étant à régler dans les css générés dans scripts.js en remplaçant la valeur 1000 par celle désiré.