Slider

Salut, voila je fais un site, mais j'ai un problème pour une sorte de slider.

http://vinzstudio.fr/vinzstudio/slider.png

Voila je voudrais que quand je clique sur les puces en dessous du macbook, l'écran change. J'ai déjà codé le mac et l'image dedans, il me manque plus qu'a mettre le système qui fait changer les images quand je clique, help me

Hello

Bah la réponse est dans le titre, tu as besoin d'un slider
En général, le code du slider est une simple liste la puce dans laquelles on va mettre les images. Ensuite on utilise du CSS et du JS pour masquer toutes les images sauf une. Une recherche sur le forum ou google pour "plugin de slider JavaScrip" ou "plugin slider jQuery" devrait t'aider

Ok je vais voir mais le jquery et moi c'est pas gagné ^^

Viinz a écrit :
Ok je vais voir mais le jquery et moi c'est pas gagné ^^

Aucunement besoin de réelles connaissances en Javascript, il suffit de suivre les instructions du site concernant le slider.

Comme slider simple d'utilisation, je peux te conseiller Flexslider.

Sinon, l'ami Geoffrey s'amuse (et de fort belle façon !) avec le CSS... attention, ce n'est pas forcément "plus simple" que JavaScript ou jQuery

6l20 a écrit :
ce n'est pas forcément "plus simple" que JavaScript ou jQuery

Sans déc ?

jb_gfx a écrit :

Sans déc ?

Mais qu'il est taquin

Je vais essayer avec le Flex Slider, mais j'ai oublié de préciser, que quand l'image change, il y a un texte à gauche du Macbook qui doit changer aussi. L'image est dans une div et le texte dans une autre. Comment faire ?

Sinon j'ai réussi pour le slider dans l'écran, sauf que j'ai moi même intégré les boutons en dessous, ils marchent tres bien, sauf que je ne sais pas faire pour que l'active se déclenche, car mes boutons sont des images lien déclarés dans le html.
Modifié par Viinz (06 Jun 2013 - 12:36)

Up

tu peux aussi faire toi même ton slider : un peu de css et de jquery on peut tout faire

une image et une legende correspond à une puce

exemple :

<img src='...' id='img_1'/>
<div id='legend_1'>...</div>
<li id='puce_1'>...</li>

quand tu cliques sur le li :

$('li').click(function(){
id = $(this).split('_')[1]; //1 sur je clique sur la premiere etc

//a partir de la plus qu'a cacher ce qui est en trop avec des effets ou non

//et d'afficher la légende et l'image correspondante à l'id donc plus qu'une histoire de concat.

});

si t'es feignant y'a plus d'une centaine de librairie qui feront tout pour toi et la je te laisse avec notre ami google
Modifié par mini-truc (12 Jun 2013 - 16:42)