11540 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Je rencontre un problème sur lequel je bloque !
J'aimerais un slider de 1920px ( taille de mes images ) qui soit centré sur ma page, donc sur mon écran avec résolution 1920 de large aucun souci mais dès lors que je réduis ma fenêtre pour tester avec une résolution inférieure ( ex : 1024 ), le slider reste coller au bord gauche.

Voici mes code :

<script>
$(document).ready( function(){
	$('#slideshowHolder').jqFancyTransitions({ width: 1920, height: 700, delay: 2500, effect: 'wave', navigation: true, titleOpacity: 0.7, titleSpeed: 1000, strips: 20, stripDelay: 50});
});
</script>


Mon width est de 1920px, je ne parviens pas à mettre 100% à l’intérieur, ce qui pourrait être une autre solution alternative.

<div id="slide_container">
    <div id="slideshowHolder">
      <img src='images/slider/img1.jpg' />
      <img src='images/slider/img2.jpg' />
      <img src='images/slider/img1.jpg' />
    </div><!--end header_container-->
</div><!--end header_container-->


#slide_container {
	width:100%;
	height:700px;
	position: relative;
	overflow-x:hidden;
}
	
#slideshowHolder {
	height: 700px;
	margin: 0 auto;
	max-width: 1920px;
	min-width: 1024px;
	position: relative;
}


Lien du fichier js: http://code.google.com/p/jqfancytransitions/downloads/detail?name=jqFancyTransitions.1.8.min.js&can=2&q=

Merci d'avance...
Bonjour,

Si j'étais toi je n'utilisera pas ça (1920px) en gros ceux qui ont pas ta résolution on pas droit à pouvoir naviguez sans scroller comme des dingues merci !
En plus j’imagine pas les pauvres H qui utilise le clavier et vont devoir faire des efforts titanesque pour avoir une once de plaisir visuel Smiley langue .

Je te conseillerais d'utiliser un slider responsive qui s'adapte à la taille de ton écran.
Ca sera beaucoup plus pratique pour tout le monde ^^ ! (même les mobiles Smiley smile )
Je ne pense pas que ce soit une mauvaise idée, beaucoup de site travail maintenant avec des background ou slider de 1920px, le tout est d'avoir l'information principal sur 980px !

Voila le rendu que je cherche : http://www.incomm.fr/#
Et le résultat est parfait pour n'importe quel support.

non ?
si tu veux atteindre un width à 100% il te sera plus judicieux d'utiliser la position absolute et non pas relative ... ou d'utiliser un script javascript pour redimensionne rta div au dimension du 100%
Tu peux faire ceci pour centrer un élément même quand la largeur de la fenêtre est inférieure à celle de l'élément:
div {
   width:1920px;
   height:700px;
   left:50%;
   margin:0 0 0 -960px; /* La moitié de la valeur de width */
   position:relative;
}