S3Slider jQuery plugin

philp

Habitué
Hello je souhaite utiliser ce script(http://www.serie3.info/s3slider/demonstration.html), pour la mise en place pas de problème, c'est pas très compliqué non plus... Mon problème c'est que je n'arrive pas le placé là ou je veut, il se retrouve systématique en haut de la page à gauche avez vous une solution? Merci d'avance.
 

blasil64

Expert
Bonsoir,
Je suis content d'être tombé sur ce message, je vais l'utiliser moi aussi car je le trouve très stylisé. Pour l'utiliser, rien de plus simple !
Admettons, tu recopies tel quel ce qu'il a écrit sur son site, il va falloir te télécharger la librairie jQuery ainsi que le s3Slider.js. Concernant ce dernier, je n'ai pas trouvé de liens menant vers un téléchargement, mais tu peux récupérer le code via Mozilla firefox en affichant le code source de la page (ctrl + u) et en cliquant sur le fichier js en question.

Ensuite, une fois que tu as les deux fichiers JS, il faut les mettre dans un dossier 'js' et les nommer les fichier jquery.js et s3Slider.js.
Ensuite, il va falloir créer 2 fichiers en à la racine de ton dossier (par exemple, tu testes ta page web, tu crée un dossier 'test', dedans tu auras tes deux nouveaux fichiers ainsi que ton dossier 'js' contenant les deux fichiers js). Le premier fichier, nomme le styleSilder.css et insère dedans le code CSS qu'il te fournit. Le dernier fichier, nomme le index.html et copie cela :

[cpp]<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/s3Slider.js" type="text/javascript"></script>

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="#" />
<span>Your text comes here</span>
</li>
<li class="s3sliderImage">
<img src="#" />
<span>Your text comes here</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div> [/cpp]

Remplace les '#' par leNomDeTonImage.jpg (ou png ou jpeg selon l'image que tu veux mettre). Ces ilages doivent se trouver à la racine de ton dossier 'test' (donc avec les fichiers CSS et HTML si tu m'as suivi...).

Normalement, cela devrait fonctionner !

Bonne chance !
 

philp

Habitué
Merci pour ta réponses, mais pas de soucis avec ça, j'arrive à l'utiliser sans problème. Mon problème c'est que je n'arrive pas à le placer ou je veut, il se place systématiquement au haut de la page à gauche, j'ai beau inserer le code là ou veut que la fenêtre doit se trouver pas possible, tu à une idée?

http://www.image-reunion.re/
 

blasil64

Expert
Bonjout,
Utilises-tu des attributs CSS pour essayer de le placer ? Avec des position relative ou absolues...
 

blasil64

Expert
Bonsoir,
Et si tu rajoutes l'option vertical en la fixant à true lorsque tu exécutes le script :
[cpp]$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
vertical: true
});
});[/cpp]
 

blasil64

Expert
Ou alors, utiliser dans le script JS à la place de 'vertical: true':
[cpp]orientation:'vertical'
[/cpp]
 

philp

Habitué
Je te remercie pour tes conseils, je test sa dès que possible et te tient au courant, encore merci.
 
Vous devez vous inscrire ou vous connecter pour répondre ici.
Derniers messages publiés
Statistiques globales
Discussions
730 079
Messages
6 716 714
Membres
1 586 247
Dernier membre
MrAzgarIII
Partager cette page
Haut