Bonjour,

Je voudrais essayer de configurer ce slider sur mon site :

http://www.francegrossiste.com/creation-site/style-templates.html

mais après 1 journée de recherche je ne trouve pas les css qui font le beau cadre contenant le slider JQuery ?

Merci pour vote aide.

9 réponses


golendercaria
Réponse acceptée

He le css peut se récupérer et le code javascript.
Maintenant en regardant vite fait le slider je peux remarquer :

1) deux bouton (div avec padding qui adapte la taille du bouton en fonction du contenu)
2) la position des boutons : sans doute le slider en absolute et les bouton de même exemple: celui de gauche a top:100px; left:0px; et celui de droit à top:100px; right:0px;
3) et en jquery un bind sur l'hover du slider.

Donc récapitulons (je prend un exemple d'un slider de 600 sur 200)

HTML
<div id="slider">
    <!-- ton slider -->
    <span id="prev">prev</span>
    <span id="next">prev</span>
</div>
CSS
#slider{
    width:600px;
    height:150px;
    position:absolute;
    border:5px solid #ececec;
}
#prev{
    position:absolute;
    left:0;
    //150/2-taille bt/2
    top:68px; //exemple
}
#next{
    position:absolute;
    right:0;
    top:68px;
}
//pour le petit effet en bas tu dois ajouter une image en dessous du slider, une image d'ombrage
JS->jquery
function affichageBtOn(){
    //je prend un exemple sur l'opacity XD plus rapide
    $('#slider span').animate({'opacity':'1'},{duration:500});
}
function affichageBtOff(){
    //je prend un exemple sur l'opacity XD plus rapide
    $('#slider span').animate({'opacity':'0'},{duration:500});
}
$('#slider').bind('mouseover',affichageBt);
$('#slider').bind('mouseout',affichageBt);

J'ai du mal comprendre mais le cadre c'est bêtement un

border : 5px solid #ececec
sam75018
Auteur

Merci golendercaria de votre réponse ...

En fait j ai le .js mais pas

les css : des flèches prev suiv , cadre et l ombre dessous

et c beaucoup moins classe sans !

si quelqu'un peut m aider a télécharger l ensemble, merci.

sam75018
Auteur

Merci golendercaria

Hou la la ...

bon j essaye ... je travaille pas à la vitesse de la lumière !

et je post

sam75018
Auteur

Merci de faire vivre ce forum ... et de répondre au débutant !

j ai pu récupérer l image de fond ( je m etais obstiné a chercher le css ... )

je test les fonds sous av ar

et je post

sam75018
Auteur

Merci encore

j arrive a un compromis qui me vas ...

Merci de valider les réponses t'ont aidées.

sam75018
Auteur

Oui les réponses de golendercaria m ont mis sur la bonne piste !

En cliquant sur le petit signe vert valiser en haut à droite des messages. :)