Tutoriel Vidéo jQuery : Carrousel javascript

dosfly Il y a 14 jours Répondre

Merci bcp pr la vidéo c tres bien expliqué est ce que quelqu'un peut m'envoyer les fichiers ds la vidéo(index.php, carrousel.css, carroussel.js et aussi la bib jquery.js)dans cet email dounia.oudrhiri@gmail.com Merci d'avance

Nerds Il y a 2 mois Répondre

Je rejoins les autres avis en disant que c'est vraiment un super tuto,
Seul problème c'est que j'aimerai pouvoir afficher plusieurs slide en même temps mais avec une seule active à la fois et je ne vois pas comment faire.
Merci d'avance

Col1 Il y a 2 mois Répondre

Merci super tuto !!

Pour l'instant pas de soucis sauf un tit bug à causse d'un r en trop dans Currrent... 30min pour un ptit r =_= !!

Je me lancerai dans la suite demain

Vintz Il y a 2 mois Répondre

Dans le fichier carrousel.js le code que l'on a à 16:00 min dans la vidéo quand je le lance me donne elem is not defined. En même temps avec elem : null, j'ai envie de dire normal mais dans ce cas pourquoi ça marche chez vous et pas chez moi?

Nyah Il y a 3 mois Répondre

Bonjour,
j'aimerais modifier la pagination par des images
j'ai tenté d'insérer les images puis de rendre le texte non visible malheureusement aucun résultat fructueux.
Si quelqu'un pouvait me donner un coup de main

Shakuro Il y a 3 mois Répondre

Merci beaucoup pour ce tutoriel! Dommage que tu n'as pas continué avec les boutons PREV/NEXT que je souhaite faire. Mais bon top dans l'ensemble tout de même!

Kaigo Il y a 3 mois Répondre

Sincèrement je dis chapeau.

Je cherchait un carrousel déjà fait et je tombe sur ton tuto où c'est franchement bien expliqué, ça m'a même permis de combler une tare que j'ai vis à vis du cours que j'ai eu donc je ne peut que te remercier pour cet excellent travail, j’espère que tu va continuer cette excellente série de tuto car c'est du très bon boulot.

Un énorme merci à toi

lilly0705 Il y a 3 mois Répondre

Bonjour,

Merci pour ce tuto il est vraiment top !!

Le seul défaut que je lui trouve c'est qu'il ne fonctionnement sous ie ...

J'ai vu plus haut dans les commentaires qu'on s'était penché sur la question mais je n'ai pas vu si au final une solution avait été trouvé ???

étant novice en js j'avoue que je m'arrache les cheveux pour arriver à le faire fonctionner sous ie.
Donc si quelqu'un a trouvé la solution miracle je suis preneuse !!!!

kro1981 Il y a 3 mois Répondre

bonjour,
merci pour ce tuto. par contre je suis une grande débutante et j'essaye d'intégrer des liens sur les images/textes pour faire en sorte de tomber sur la page en question pour plus d'info.
j'ai mis le lien dans le fichier index :
<div id="slide1" class="slide">
<a href="http://www.nomdusite.com "> <div class="visu"> <img src="img/slide1.jpg" />
</div>
<div class="title">
Titre 1 - exemple
</div></a>

Lorsque je l'ouvre une première fois ça fonctionne, mais une fois que les slides passent et que ça repasse au 1er slide, plus de lien
Est-ce que quelqu'un à une méthode?
Merci d'avance!

davidwebb Il y a 5 mois Répondre

Bonjour, j'ai un petit soucis, j'utilise ce script qui va bien dans l'ensemble, mais quand il passe de la seconde à la 3e image, le script ne semble pas appeler le chiffre, en bas à droite. Il reste collé au no 2, puis hop 3 et 4 tout de suite. Je pensais que c'était parce que j'avais modifié le code, mais j'ai pris les fichiers originaux et je les ai placé ailleurs sur un autre serveur : même problème. Ça ne semble faire ce problème que sous Explorer, sur Windows (XP, Vista...). J'ai essayé sur 3 machines différentes, même problème.

merci de votre aide, j'aimerais beaucoup régler ce petit bogue

Ceux qui veulent tester http://www.replikcomm.com/carrousel/index.html

Dexyne Il y a 5 mois Répondre

Super tuto, toutefois il m'arrive un problème.

Le tout fonctionne plutôt bien (à part pour la dernière partie avec le titre qui descend puis remonte, moi il descend (donc disparaît) mais ne s'affiche plus (et je vois les autres titres en plus).
Mais le plus gros bug que j'ai - et ce sur Opera, FF et Chrome en dernière version - et qui au bout d'un moment fait passer les différentes images n'importe comment.
Au début tout va bien, si je clique sur les chiffres de la pagination aussi, mais arrive un moment ou tout s'emballe et les images (donc pages) s'affichent un peu dans n'importe quel sens et rapidement.
Avec le mouseover j'avais aussi le soucis qu'il s'arrêtait uniquement si je bougeais la souris sur l'image mais si je la laissais sans bouger la fonction qui est censé arrêter l'auto-slide ne fonctionne pas.

Du coup ça fait plusieurs petits soucis (hormis le gros au niveau de l'affichage) qui sont plutôt embêtant alors que le tuto est simple et efficace.
J'espère pouvoir régler mes soucis ce qui serait bien dommage le cas contraire.

Même si le tuto date beau boulot que de l'avoir fait.

Dex'.

Huviel Il y a 5 mois Répondre

Regarde du côté des key events de jquery

rbarth Il y a 6 mois Répondre

Hello, mon net étant trop lent je ne peux pas regarder à nouveau cette vidéo. Or il me semble que tu explique une solution dans le cas où on voudrait se servir de flèches "next" et "previous" pour naviguer entre les slides. Qui peut m'aiguiller please ?!

Merci d'avance

cricou Il y a 6 mois Répondre

Pourriez vous m'éclairer,
Je ne parviens pas à charger les fonctions javascript du carrousel.

voici mon script js :

/*
CARROUSEL
*/

var carrousel = {

init : function (){
alert ("test");
}

}

carrousel.init();


Quand je rafraichis ma page, je n'obtiens aucune alerte, pourquoi?

Merci d'avance

Boris Il y a 10 mois Répondre

Bonjour,

Excellent tutoriel !

Je voulais savoir comment faire pour mettre en place les slide comme ceux-ci :

Le slide actif au milieu, le prochain slide visible à droite et a gauche au chargement de la page le dernier slide et au changement normal le slide précédent (un exemple type ici : http://demo.rockettheme.com/jan11/).

Une idée ?
Merci

Flo Il y a 11 mois Répondre

Je comprends pas...
J'ai suivi le tuto a la lettre, 2 fois, je bosses sur NetBeans...
Pas moyen de le faire marcher... Apperemment il bloque sur le append() puisque je n'ai pas d'alert qui s'affiche apres...
Toutes mes images sont le cadre, avec la derniere en premier...
Il semblerai que personne n'ai de problemes et que tout fonctionne...
Quelqu'un aurait il eu le meme probleme, ou a une quelconque solution?
Merci

al37350 Il y a 11 mois Répondre

bonjour,
j'ai un petit probleme ,pourquoi au deuxième passage du carrousel les lien ne sont plus cliquable ?
merci d'avance

Seth_soul Il y a 11 mois Répondre

Bonjour,

Tout d'abords super tuto ! Je suis débutant en programmation Javascript et ce site m'est bien utile, merci.

Cependant j'ai un problème et j'ai passé une journée entière à tenter diverse solutions et recherches sur internet sans résultat. Je vous explique le problème :

J'ai modifier le script pour qu'il y ai un effet de roll-over avec animation sur la div (.title) qui contient le texte associés à l'image. Elle contient diverse information (nom, auteur, description, etc...) A l'état initial elle n'affiche qu'une partie limitée de la div (nom, auteur), et lorsque la souris passe dessus elle se déplace vers le haut pour afficher tout son contenu.

J'ai pour cela utilisé .hover() qui fonctionne plutôt bien à l'exception du fait qu'une fois passé à la div supérieure contenant l'image et le texte associé, l'effet n'est plus présent pour les div 'inférieures' cependant pour les div avec un 'numéro supérieur' l'effet est fonctionnel. Au final, lorsque toutes les div sont passées, l'effet n'est présent uniquement que sur la dernière div.

Pourriez vous m'indiquer une piste pour résoudre ce problème? D'avance merci.

Voici le code de mon fichier carrousel.js

// JavaScript Document

var carrousel = {

nbSlide : 0,
nbCurrent : 1,
elemCurrent : null,
elem : null,
timer : null,

init : function (elem){

this.nbSlide = elem.find(".slide").length;

// Créer la pagination
elem.append('<div class="nav_slide"></div>');
for(var i=1; i<=this.nbSlide;i++){
elem.find(".nav_slide").append('<span>'+i+'</span>');
}
elem.find(".nav_slide span").click(function(){carrousel.gotoSlide($(this).text());})
// alert(this.elem);

// Initialisation du Slide

this.elem = elem;
elem.find(".slide").hide();
elem.find(".slide:first").show();
this.elemCurrent = elem.find(".slide:first");
var titleHeight = this.elemCurrent.find(".title").height();
this.elemCurrent.find(" .title:first").css("bottom", -titleHeight+50);
this.elem.find(".nav_slide span:first").addClass("active");


// On crée le timer

carrousel.play();
// Stop quand on passe dessus
elem.mouseover(carrousel.stop);
elem.mouseout(carrousel.play);




},

gotoSlide : function(num){
if(num==this.nbCurrent) {return false;}
/* this.elemCurrent.fadeOut();
this.elem.find("#slide"+num).fadeIn();*/

this.elemCurrent.find(".visu").fadeOut();
this.elem.find("#slide"+num).show();
this.elem.find("#slide"+num+" .visu").hide().fadeIn();
var titleHeight = this.elemCurrent.find(".title").height();
this.elemCurrent.find(" .title").animate({"bottom": -titleHeight-10},500);
this.elem.find("#slide"+num+" .title").css("bottom",-titleHeight-10).animate({"bottom": -221},500);
this.elem.find(".nav_slide span").removeClass("active");
this.elem.find(".nav_slide span:eq("+(num-1)+")").addClass("active");
this.nbCurrent = num;
this.elemCurrent = this.elem.find("#slide"+num);
},

next : function(){
var num = this.nbCurrent+1;
if(num>this.nbSlide){
num = 1;
}
this.gotoSlide(num);
},

prev : function(){
var num = this.nbCurrent-1;
if(num<1){
num = this.nbSlide;
}
this.gotoSlide(num);
},

stop : function(){
window.clearInterval(carrousel.timer);
carrousel.moreInfo();


},

play : function(){
window.clearInterval(carrousel.timer);
carrousel.timer = window.setInterval("carrousel.next()",5000);
},

moreInfo : function(){

/* $(" .title").mouseover( function(){carrousel.elemCurrent.find(" .title").css("bottom",-221).stop().animate({"bottom": 0},500)});
$(" .title").mouseout( function(){carrousel.elemCurrent.find(" .title").css("bottom",0).stop().animate({"bottom": -221},1000)});
*/
var num = this.nbCurrent;

this.elem.find("#slide"+num+" .title").hover(

function(){
$(this).stop();
$(this).animate({"bottom": 0},500);
},

function(){
$(this).stop();
$(this).animate({"bottom": -221},500);
}

);



}
}

$(function(){
carrousel.init($("#carrousel"));

});

loulou8407 Il y a 12 mois Répondre

Bonjour,

j'ai un nouveau problème avec le carrousel. J'ai un menu juste au dessus avec des div qui s'ouvrent quand on passe la souris sur les liens du menu, mais les div apparaissent toutes derrière le carrousel.

J'ai essayé avec des z-index mais je sais pas si c'est la bonne piste car rien ne change.

D'avance merci

loulou8407 Il y a 1 an Répondre

Mais c'est bien sur !!!
c'est logique en plus !

Merci beaucoup mouz

jeanflo Il y a 1 an Répondre

Grafikart, encore Bravo pour le tuto
Petite adaptation à mon besoin :

Je n'utilise par la navigation automatique mais une navigation en dur :
<div class="navigation">
<span>1- Plein de promotions !</span>
<span>2- Faites réviser vos tondeuses</span>
<span>3- Ciseaux d'or 2011</span>
</div>

Du coup j'ai commenté ce code dans le fichier js :
// Créer la pagination
/* elem.append('<div class="navigation"></div>');
for(var i=1;i<=this.nbSlide;i++){
elem.find(".navigation").append("<span>Information n°"+i+"</span>");
}
*/

Puis j'ai ajouter .charAt(0)qui permet de récupérer le premier caractère de ma navigation :
elem.find(".navigation span").click(function(){ carrousel.gotoSlide($(this).text().charAt(0)); })

Voilà ma modeste contribution visible sur www.dogcat.com
JFB

loulou8407 Il y a 1 an Répondre

ENcore une fois bravo,
Grafikart tu es mon dieux !!!

Je suis m^me pas capable d'arriver à copier cet excellent travail !!!:-(

Tous marche très bien pour mes trois premières slides puis ensuite j'ai un blanc qui apparait. Qudan je fais un tes d'alert il s'affiche 0 à num.

J'ai beau regarder le code depuis des heures je vois pas le problème !!!
voici mon code , merci pour votre aide :

// JavaScript Document

var carrousel ={
nbSlide :0,
nbCurrent : 1,
elemCurrent : null,
elem : null,
timer : null,

init : function(elem){
this.nbSlide = elem.find(".slide").length;//compte le nbrs de slide

//Créer la pagination
elem.append('<div class="navigation"></div>');
for(var i=1;i<=this.nbSlide;i++){
elem.find(".navigation").append("<span>"+i+"</span>");
}
elem.find(".navigation span").click(function(){carrousel.gotoSlide($(this).text());})

//initialisation du carrousel
this.elem=elem;
elem.find(".slide").hide();//cacher les slides
elem.find(".slide:first").show();//Montrer les premier slide
this.elemCurrent = elem.find(".slide:first");//l'élément courant sera le premier slide
//this.elem.find(".navigation span:first").addClass("active");

//on cré le timer
carrousel.play();

//Stop quand on passe dessus
elem.mouseover(carrousel.stop);
elem.mouseout(carrousel.play);

},
gotoSlide : function(num){
//alert(num);
if(num==this.nbCurrent){return false;} //Enpèche l'animation si on clique sur le même slide

/*Animation 1 en fadeIn fadeOut
this.elemCurrent.fadeOut();
this.elem.find("#slide"+num).fadeIn();*/


/*Animation 2 en slide de droite a gauche ou gauche a droite
var sens = 1;
if(num<this.nbCurrent){ sens = -1;}
var cssDeb = {"left" : sens*this.elem.width() };
var cssFin = {"left" : -sens*this.elem.width() };
this.elem.find("#slide"+num).show().css(cssDeb);
this.elem.find("#slide"+num).animate({"top":0,"left":0},500);
this.elemCurrent.animate(cssFin,500);
*/

/*Animation 3*/


/*this.elemCurrent.find(".visu").fadeOut();
this.elem.find("#slide"+num).show();
this.elem.find("#slide"+num+" .visu").hide().fadeIn();*/
this.elemCurrent.fadeOut();
this.elem.find("#slide"+num).show();
this.elem.find("#slide"+num).hide().fadeIn();


var titleheight = this.elemCurrent.find(".title").height();

this.elemCurrent.find(".title").animate({"bottom": -titleheight},500);
this.elem.find("#slide"+num+" .title").css("bottom", -titleheight).animate({"bottom":0},500);

//this.elem.find(".navigation span").remouveClass("active");//Enlève le blanc sur les bouton
//this.elem.find(".navigation span:eq("+(num-1)+")").addClass("active");//active le blanc sur les boutons cliqués

this.nbCurrent = num;
this.elemCurrent = this.elem.find("#slide"+num);
},

next : function(){
var num =this.nbCurrent+1;
if(num>this.nbSlide){
num = 0;
}
this.gotoSlide(num);
},
prev : function(){
var num =this.nbCurrent-1;
if(num < 1){
num = this.nbSlide;
}
this.gotoSlide(num);
},
stop : function(){
window.clearInterval(carrousel.timer);
},
play : function(){
window.clearInterval(carrousel.timer);
//this.timer = window.setInterval("carrousel.next()",5000);
carrousel.timer = window.setInterval("carrousel.next()",5000); //remplacer le this par carrousel
}
}

$(function(){
carrousel.init($("#carrousel"));
});

xoliment Il y a 1 an Répondre

Salut !

Tout d'abords, un grand bravo pour ce magnifique tutoriel à Grafikart.

Malgré ce magnifique tuto. , j'ai un gros problême.

Tous marche sauf quand je clique sur 2, sa reste l'image 1, je clique sur 3 et sa reste l'image 1.

Merci d'avance ! A+

caporga Il y a 1 an Répondre

bonjour tout le monde et merci une énième fois pour tout ton travail qui est de qualité.

je suis bloqué sur un point, je m'explique : lorsque que je mouseover < elem.find(".navigation span").mouseover(function(){ carrousel.gotoSlide($(this).text()); }) > tout fonctionne bien cependant mon next < next : function(){
var num = this.nbCurrent+1;
if(num<=this.nbSlide)
{
num = this.nbCurrent+1;
}else { num = 1;}

this.gotoSlide(num);

}, >
me renvoie automatiquement sur le premier folio (qui sont au nombre de 4). je me casse la tête depuis hier, alors je me tourner vers le créateur pour en savoir plus...

merci encore

nestam Il y a 1 an Répondre

bonjour un tout petit peu d optimisation dans tous ca
Je pars dans le principe qu on a plusieurs images

on ouvre le dossier les contenant
et hope on le parcours //
le seul incovenient c est qu il faudra nommer les images par slide+numero(un tout petit peu de rigueur cela ne fait pas de mal ).
et on change tout le HTML PAR
/**************/
<?php
$dos= "img"; //Dossier des images
$dir = opendir($dos);
$num=1;
while( $file =readdir($dir)) { // Lecture dossier images

$autorise= array("jpg","png","gif");
$ext = substr(strtolower($file), -3);
if(in_array($ext,$autorise)){
echo '<div id="slide'.$num.'" class="slide">
<div class="visu">
<img src="img/slide'.$num.'.'.$ext.'"alt="Image'.$num.'"/>
</div>

<div class="title">
TITRE '.$num.'
</div>
</div>';
$num++;
//Pour ne prendre que les fichiers ont les extensions autorisees
//sinon num compte aussi les dossiers et et le fichiers thumbs.db
}

}
?>
/**************/
héé Grafikart un poil d amelioration sur le textarea sera la bienvenue
pour pouvoir mettre en valeur les bouts de codes
En tout cas merci pour tout ce que tu fais

nevermind1220 Il y a 1 an Répondre

Bonjour

j'ai moi aussi un problème, la première image du carrousel s'affiche bien et passe en fade out, mais les images suivante ainsi que leur div titre ne s'affichent pas.
J'ai vérifier et revérifier 20 fois mon code s'ils vous plaît aidez moi a trouver mon erreur:

var carrousel = {

nbSlide : 0,
nbCurrent : 1,
elemCurent : null,
elem : null,

init : function(elem){
this.nbSlide = elem.find(".slide").length;


// crée la pagination
elem.append('<div class="navigation"></div>');
for(var i=1;i<=this.nbSlide;i++){
elem.find(".navigation").append("<span>"+i+"</span>");
}
elem.find(".navigation span").click(function(){carrousel.gotoSlide($(this).text());})

// initialisation du carrousel
this.elem=elem;
elem.find(".slide").hide();
elem.find(".slide:first").show();
this.elemCurrent = elem.find(".slide:first");
},

gotoSlide : function(num){
this.elemCurrent.fadeOut();
this.elem.find("#slide"+num).fadeIn();
this.nbCurrent = num;
this.elemCurrent = this.elem.find("#slide"+num);
}
}
$(function(){
carrousel.init($("#carrousel"));
});

merci d'avance

gwadabeach Il y a 1 an Répondre

sous ie pourquoi
this.elem.find(".navigation span").removeClass("active");
this.elem.find(".navigation span:eq("+(num-1)+")").addClass("active");
ne marche pas?
en effet les span de navigation ne change pas et reste bloqué sur 1 sauf lorsque l'on passe la souris sur l'anim.

P1xHeLL Il y a 1 an Répondre

Bonjour à tous, j'ai un soucis en suivant à la lettre le tuto sur le carousel. Arrivé au moment ou je dois tester mes 3 slides, rien ne se passe, je n'ai pas la fameuse petite pop up java m'indiquant le nombre "3".

voici le .js concerné :


/*
CARROUSEL JS
*/

var carrousel = {

nbSlide : 0,
nbCurrent : 1,
elemCurrent : null,
elem : null,

init : function(elem){
this.nbSlide = elem.find(".slide").length;

}

}


$(function(){
carrousel.init($("#carrousel"));
alert(carrousel.nbSlide);
});





Merci d'avance à tous !

boardingnow Il y a 1 an Répondre

Merci pour ce tuto plus qu'excellent

al37350 Il y a 1 an Répondre

très bon tuto.
Voila je voudrait rajouter les onglet suivant et précèdent a mon carrousel comment faire ?

Thermo Il y a 1 an Répondre

désolé

Thermo Il y a 1 an Répondre

Salut, j'adore ce tuto que j'ai trouvé juste après avoir galéré a faire presque la même chose en flash.. ^^
Je souhaiterais savoir comment ajouter les bouton suivant et précédent, j'ai rajouté ces deux lignes
elem.find("#prev").click(function(){carrousel.prev($(this).text());})
elem.find("#next").click(function(){carrousel.next($(this).text());})

mais lorsque je clique dessus ca va un peu dans n'importe quel sens, j'aimerais ne plus pouvoir cliquer sur precedent lorsque je suis sur la premier slide et ne plus pouvoir cliquer sur suivant lorsque je suis sur la dernière.

Merci de ces super tutos ...
et merci d'avance pour l'aide

Thaddeus Il y a 1 an Répondre

Un petit probleme lors de la création de la page carrousel.js.
Quand je fais l'alert pour trouver le nombre de slide, il ne me repon pas "3" mais "indefined"...

Merci de l'aide si possible.

webdesignswiss Il y a 1 an Répondre

stop : function(){
windows.clearInterval(carrousel.timer);
},
play : function(){
windows.clearInterval(carrousel.timer);
carrousel.timer = window.setInterval('carrousel.next()',5000);
},



Firebug:
windows is not defined
? in carrousel.js@75()carrousel.js (ligne 76)
? in jquery-1.4.3.js@2168(Object { name="event"})jquery-1.4.3.js (ligne 2209)
? in jquery-1.4.3.js@1840()jquery-1.4.3.js (ligne 1844)
error source line: [Break on this error] windows.clearInterval(carrousel.timer);


Pourriez-vous m'ader:

Je débute

Chrisx Il y a 1 an Répondre

Bonjour,
Super tuto !

Cependant j'ai un petit problème je voulais mettre dans les titres en bas des photos des liens quand il fais son premier "tour" tout les liens marche mais, après quand il retourne a la première photo, les deux premiers liens des deux premières photo ne fonctionne plus :/

vous pouvez voir mon problème ici http://games-and-hi-tech.totalh.com/

Quelqu'un pourrais t-il m'aider ?

David Il y a 1 an Répondre

Excellent tuto, évidemment. Gros soucis néanmoins lors de l'utilisation de fichiers flash. En effet, ils se lancent tous au chargement de la page et pas lorsque c'est "leur tour". Résultat à l'onglet 2 mes visiteurs ne voient pas d'animation mais juste l'écran blanc qui la suit. Avez-vous des modifications à me conseiller ?

Danieldeboca Il y a 1 an Répondre

Personne pour m'aider?

sissinet Il y a 1 an Répondre

pour apprendre

lionelmultimedias Il y a 1 an Répondre

Il n'y a personne qui pourrais m'aider ?
Grafikart a dit :
"Tu modifie ton thème Wordpress pour générer le code HTML qui convient"
Oui mais ça fait plusieurs jours que j'essaie de trouver une solution mais je n'y arrive pas !
Merci

lionelmultimedias Il y a 1 an Répondre

Bonjour Grafikart et à tous, super le tuto comme toujours, par contre j'aimerais intégrer dans mon site wordpress le carrousel dans ma section portfolio, exactement comme dans ta rubrique portfolio mais comment faire ? lorsqu'on crée un article avec plusieurs images pour la catégorie portfolio, comment modifier le thème pour faire comprendre à wordpress d'implémenter les images dans le carrousel et non ajouter les images les unes à la suite ?? Merci par avance pour ton aide

CTim0T Il y a 1 an Répondre

j'ai suivi tout le tuto. en échange il est très bien expliquer. ! mai je rencontre un petit problème quand je tape le code pour montrer le 1er slide. et pas le dernier je rencontre toujours le dernier.

merci beaucoup pour votre aide. et toute vos compétence

ogivol Il y a 1 an Répondre

salut a tous ! tres bon tuto mais comment insère t'on les liens sur les images pour qu'elles soient cliquables ?
merci d'avance et désolé du retard :P

sbones Il y a 1 an Répondre

un tuto très util merci.

ivanova Il y a 1 an Répondre

J'ai testé la version de cédric afin de mettre deux carrousel sur la même page cela ne fonctionne pas.

first-developer Il y a 1 an Répondre

Tres bon tuto ça explique le nombre de commentaires .

ivanova Il y a 1 an Répondre

Hello,
Génial le tuto. Bon j'ai deux ou trois petits soucis mais bon rien de serieux. Ma principal préoccupation est que je souhaiterai mettre deux carroussel sur la même page. Et le script fonctionne sur l'un mais pas sur l'autre.
Une idée de la mise en place à faire.

Valouxxx Il y a 1 an Répondre

Salut et merci pour tes tuto!

J'me suis permis de transformer un peu ton fichier jscript pour que la navigation se fasse par des span "précèdent" et "suivant", mais surtout pour que cela fonctionne en boucle : arrivé au dernier slide ou image, si on fait suivant, hop ça revient au début!
Etant débutant, j'ai bien galéré plusieurs heures pour y arriver (bon, alors que ça n'a rien de sorcier)!
Voici le code, pour ceux que ça intéresse (attention, "slide" et "image" sont employé indifféremment)


var carrousel={

nbSlide: 0, /*recup nbre de slide*/
nbCurrent : 1, /* stock l'indice de l'elem en cours*/
elemCurrent : null, /* stock l'elem html qui est affiché*/
elem: null, /* dans quelle div je veux initialiser mon carrousel*/

init : function(elem){
this.nbSlide = elem.find(".image").length;

// creer la pagination
elem.append('<div class="navigation"></div>');/* on crée la div navigation*/
elem.find(".navigation").append('<span class="precedent"><--</span><span class="suivant">--></span>');/*on crée les span*/

//appel function suivant et precedent
elem.find(".suivant").click(function(){carrousel.gotoNextImage(carrousel.nbCurrent+1);});
elem.find(".precedent").click(function(){carrousel.gotoPreviousImage(carrousel.nbCurrent-1);});

//initialisation du carrousel
this.elem=elem;
elem.find(".image").hide();
elem.find(".image:first").show();
this.elemCurrent = elem.find(".image:first");
},

//Fonction de navigation
//suivant
gotoNextImage : function (num){
if(num<=this.nbSlide) // on vérifie que l'on ne soit pas à la fin des images
{
this.elemCurrent.fadeOut(); // quand on click, cache l'image en cours
this.elem.find("#image"+ num).fadeIn(); // on va ensuite chopper l'image en fonction de son indice
this.nbCurrent = num; // on met à jour l'indice de l'élement en cours
this.elemCurrent = this.elem.find("#image"+num); // on met à jour l'elem en cours
}
else // sinon on retourne à l'image 1
{
num=1;
this.elemCurrent.fadeOut();
this.elem.find("#image"+ num).fadeIn(); // on va ensuite chopper l'elem en fonction de son indice
this.nbCurrent = num; // on met à jour l'indice de l'élement en cours
this.elemCurrent = this.elem.find("#image"+num); // on met à jour l'elem en cours
}
},

//Precedent
gotoPreviousImage : function (num){
if(num<1) // si on veut aller, en dessous de 0, on retourne à la derniere image
{
num=this.nbSlide;
this.elemCurrent.fadeOut(); // quand on click, cache l'image en cours
this.elem.find("#image"+ num).fadeIn(); // on va ensuite chopper l'elem en fonction de son indice
this.nbCurrent = num; // on met à jour l'indice de l'élement en cours
this.elemCurrent = this.elem.find("#image"+num); // on met à jour l'elem en cours
}
else
{
this.elemCurrent.fadeOut();
this.elem.find("#image"+ num).fadeIn(); // on va ensuite chopper l'elem en fonction de son indice
this.nbCurrent = num; // on met à jour l'indice de l'élement en cours
this.elemCurrent = this.elem.find("#image"+num); // on met à jour l'elem en cours

}

},

}

$(function(){

carrousel.init($("#galerie"));/* on initialise donc l'elem dans galerie*/

});

Dao Il y a 1 an Répondre

Je me demandé tous les jours depuis plusieurs mois dejas comment on fait ces genres de truc. Donc je ne peux que dire merci pour ce super tuto et mes respects.

newo Il y a 1 an Répondre

Super tuto, merci. Pour ceux qui se demander comment se passer des chiffres dans la pagination, je suis parti de l'idée de grafikart dans les coms plus haut et voici ce que ça donne :

for(var i=1;i<=this.nbSlide;i++){
elem.find("nav").append("<span id='"+i+"'>.</span>");
}
elem.find("nav span").click(function(){ carrousel.gotoSlide(this.id); })

je n'ai rien ajouté, juste modifier l'existant, j'ai remplacé la div pagination par une balise nav (html5) et à la place du point dans la span, vous pouvez mettre ce que vous voulez.

Danieldeboca Il y a 1 an Répondre

Merci le code marche bien mis à part une choses :

Je recherche actuellement le problème car les titres changent casi normalement si ce n'est que l'ancien titre reste en dessous de l'image... je ne sais pas si vous voyez...un peu comme si le titre précedent se retrouvait 30px plus bas et du coup il se superpose avec le titre précédent. Le titre courant lui se place bien avec la bonne animation.

Une petite idée sur la question?

Merci d'avance

Arya Il y a 1 an Répondre

merci ......
il y a un problème, quand on clic sur "1", l'animation arrêt définitivement.

Arya Il y a 2 ans Répondre

bonjour,
déjà, Merci pour vos tutoriels, j'apprends beaucoup sur ce site.

Je comprend parfaitement vos cours mais je n'arrive pas a réaliser se que je veux. Je comprend pas aussi bien le cours sur le JS que les cours sur css ... .

Alors mon objectif est de réaliser un galerie similaire à celui la :
>> http://www.ora-ito.com/products/eva-pitement-central


Avec le scrolling minimaliste en bas des miniature, puis faire disparaitre/apparaitre les miniature avec le survole. (je sais pas si on me comprend)

Si je pouvais au moins le réoccuper puis le changer progressivement.
pensez vous pouvoirs m'aider a comprendre?

naflo Il y a 2 ans Répondre

Bonjour, j'aimerai savoir si l'on peut aussi ajouter du php pour un caroussel qui afficherait automatiquement l'image et un texte descriptif de la derniere news postée.

Merci encore pour ces superbes tutos !!

CopyRight Il y a 2 ans Répondre

Excusez un boulet comme moi j'avais pas lu tout les commentaires :S

CopyRight Il y a 2 ans Répondre

Bonjour, tout d'abord super tuto, mais j'ai un probleme.
En effet, j'ai voulut mettre des lien sur les image et les titre, au premier tour tout va bien mais une fois que je suis arrive a la derniere diapo les liens ne sont disponible que sur la derniere diapo.
Merci d'avance pour vos reponses !

souriskiclic Il y a 2 ans Répondre

Salut,


J'ai utilisé cet excellent tuto pour me faire un petit carrousel sur un des sites que j'ai développé.

C'est possible de le voir figurer parmis ceux qui ont utilisé ce tuto ?

Voici l'URL de mon site en question :www.pays-de-troncais.com

Merci d'avance,

Bruno.

nikosh Il y a 2 ans Répondre

Merci pour ce super tutoriel, ça m'a bien aidé

ink Il y a 2 ans Répondre

Merci beaucoup pour ce super carrousel
je viens de l'intégrer sur un site et il fonctionne bien sauf une petite choses que je ne comprend pas. quand il revient au premier slide aprés avoir tous défiler, mon texte dans ma classe title ce superpose...du coup je vois tous les texte des class title...Quelqu'un aurai une idée de comment supprimer ça ?
merci beaucoup.

gaia Il y a 2 ans Répondre

coucou, j'ai un petit soucis,

Firebug m'affiche "this.gotoSlide is not a function"

alors la pagination ne fonctionne pas,

un coup de main serait le bienvenue svp

DisSsha Il y a 2 ans Répondre

résolu .. forcément le fichier n'était pas dans la directory locale

tibotime Il y a 2 ans Répondre

Oups, j'avais pas vu que le sujet avait été abordé plus haut. Merci!!! A+

tibotime Il y a 2 ans Répondre

Super tuto! Cependant, j'ai un petit soucis. J'ai inséré des liens dans le carrousel, ils fonctionnent au premier chargement mais finissent par bloquer. Quelqu'un aurait une idée?

sky Il y a 2 ans Répondre

g suivi le tuto de bout en bout mais
j'ai une erreur qui s'est glissé quelque part et là je séche, si quelqu'un peut m'apporter son aide , merci bien!

this.elem.find(".navigation span:first").addclass is not a function
[Break on this error] this.elem.find(".navigation span:first").addclass("active");
carrousel.js (ligne 26)
this.elemcurrent is undefined
[Break on this error] this.elemcurrent.animate(css.fin,500); (ligne50)

sky Il y a 2 ans Répondre

trouvé!!! Oups j'avais claqué un commentaire en plein à l'intérieur de mes accolades^^ d'où rupture de chaînes!!

Sky Il y a 2 ans Répondre

petit problème récurant !! j'ai un retour de firebug qui me renvoie l'erreur suivante

this.elemCurrent.fadeout is not a function
[Break on this error] this.elemCurrent.fadeout();

si quelqu'un connait la solution
merci

gaia Il y a 2 ans Répondre

c'est bon j'ai trouvé, j'avais mal écrit length !

Réponse trouvée sur weecast dans les commentaires sur le même tuto, comme quoi !

gaia Il y a 2 ans Répondre

"nestam (Mercredi 09 Décembre 2009 à 16:28):

Par contre moi j ai un soucis par rapport au nombre de slide
quand je mets une alert au moment c est défini dans l article firefox me met undefined.
va savoir "

J' ai exactement le même soucis, ça peut venir d'ou ? ça fait déjà un petit moment que je cherche, j' ai vérifier plusieurs fois le code...

scarymanu Il y a 2 ans Répondre

Bonjour,merci pour ce tuto bien utile.
J'ai un soucis pour rajouter les deux boutons précédent et suivant pour faire défiler le carrousel.

Voici le code HTML :

<div class="prev"></div>
<div class="next"></div>
<!--
<div class="navigation">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
-->

Voici mes class CSS :
.prev{
position:absolute;
bottom:2px;
left:10px;
height:29px;
width:29px;
background:url(prev.gif) no-repeat;
z-index:1;
cursor:pointer;
}

.next{
position:absolute;
bottom:2px;
right:10px;
height:29px;
width:29px;
background:url(next.gif) no-repeat;
z-index:1;
cursor:pointer;
}

Voici mon code javascript qui est censé faire défiler le carrousel quand on click sur l'un des deux boutons:

elem.find(".prev").click(carrousel.prev);
elem.find(".next").click(carrousel.next);

elem.find(".navigation span").click(function(){ carrousel.gotoSlide($(this).text()); })

Voila j'aimerai savoir les erreurs que j'ai fait, afin que mon carrousel marche également avec ces deux boutons.

J'aimerai savoir également si il est possible que je place le bouton précédent de quelques px sur la gauche par rapport au 1er bouton navigation et le bouton suivant de quelque px sur la droite du dernier bouton navigation sachant que mes boutons de navigation ont été centré. Dois je utiliser le css ou le javascript pour faire cela?

Exemple : prev 1 2 3 4 next

Merci

first-developer Il y a 2 ans Répondre

Jsute pour savoir s'il est possible d'appliquer le script "carrousel" à plusieurs éléments du genre:

$(function() {
carrousel.init($("#carrousel"));
carrousel.init($("#carrousel2"));
carrousel.init($("#carrousel3"));
});

Car je l'ai fait avec un autre script que j'ai écrit mais ça ne marche pas.

mercilio

Burnog Il y a 2 ans Répondre

Oops :D

Je viens de trouver la soluce porposé par Grafikart qui a corrigé mon problème immédiatement :

Remplacer les this.timer par des carrousel.timer

Merci encore pour cet excellent tuto !

Burnog Il y a 2 ans Répondre

Bonjour,
Merci pour le tuto.

Je me trouve confronté à un (ou plusieurs) bug(s). déjà detectés par shin le vendredi 05 Mars 2010 à 21:26.

En effet dans la methode fadeIn et fadeOut, le stop fonctionne une fois. Puis lorsque on enlève la souris (mouseOut) le carrousel reprend de façon frénétique à une vitesse hallucinante et anarchique.

Voici mon code (qui doit être littérallement le même que dans le tuto hormis .navigation qui chez moi est .pagination) :

/*
Carrousel
*/
var carrousel = {

nbSlide : 0,
nbCurrent : 1,
elemCurrent : null,
elem : null,
timer : null,

init : function(elem) {
this.nbSlide = elem.find(".slide").length;

// Créer la pagination
elem.append('<div class="pagination"></div>');
for(var i=1;i<=this.nbSlide;i++){
elem.find(".pagination").append("<span>"+i+"</span>");
}
elem.find(".pagination span").click(function(){carrousel.gotoSlide($(this).text()); })

// Initialisation du carrousel
this.elem=elem;
elem.find(".slide").hide();
elem.find(".slide:first").show();
this.elemCurrent = elem.find(".slide:first");
this.elem.find(".pagination span:first").addClass("active");

// On cré le timer
carrousel.play();

// Stop quand on passe dessus
elem.mouseover(carrousel.stop);
elem.mouseout(carrousel.play);
},

gotoSlide : function(num){
if(num==this.nbCurrent){return false;}

/* Animation en Fade */
this.elemCurrent.fadeOut();
this.elem.find("#slide"+num).fadeIn();
this.elem.find("#slide"+num).animate({"top" : 0, "left" : 0}, 500);
this.elemCurrent.animate(cssFin,500);*/

this.elem.find(".pagination span").removeClass("active");
this.elem.find(".pagination span:eq("+(num-1)+")").addClass("active");
this.nbCurrent = num;
this.elemCurrent = this.elem.find("#slide"+num);
},

next : function(){
var num = this.nbCurrent+1;
if(num >this.nbSlide){
num = 1;
}
this.gotoSlide(num);
},
prev : function(){
var num = this.nbCurrent-1;
if(num < 1){
num = this.nbSlide;
}
this.gotoSlide(num);
},
stop : function(){
window.clearInterval(carrousel.timer);
},
play : function(){
window.clearInterval(carrousel.timer);
this.timer = window.setInterval("carrousel.next()",5000);
}

}

$(function() {
carrousel.init($("#carrousel"));
});

__fabrice Il y a 2 ans Répondre

Salut,
Tres bon tuto. Juste pour éviter d'afficher la navigation si une seule photo :

// Créer la pagination
if (this.nbSlide >1) {
elem.append('<div class="navigation"></div>');

for(var i=1;i<=this.nbSlide;i++){
elem.find(".navigation").append("<span>"+i+"</span>");
}
}

Je suis en train de transformer ce code en plugin, toujours plus utile...

Fabrice

seb Il y a 2 ans Répondre

probléme régler dsl pour le poste jai trouver ma réponse dans les commentaire

je n'ai pas chargé jquery avant le lancement du script carrousel.js

encore dsl

seb Il y a 2 ans Répondre

bonjour, j'ai fait comme vous mais un problème persiste, mon fichier index.php prend en compte mon carrousel.css mais il ne prend pas en compte le fichier carrousel.js situer a la racine de mon site.

Dans le fichier index.php j'ai pourtant bien déclarer le javascript comme ceci <script type="text/javascript" src="carrousel.js"></script>

sur cette même page j'ai un code javascript pour la neige qui lui fonctionne super bien aider moi svp une semaine que je galère merci d'avance

Fir3d Il y a 2 ans Répondre

Hello !
En lisant tous les commentaires, j'ai trouvé la solution à ce probleme :

Le_viking (Lundi 01 Février 2010 à 19:46):

Pour ceux qui block encore sur le fait que le HTML est bloqué:
Golmote, du site du zero m'a aidé à corriger ce problème.
Solution:
modifier ça :

this.elemCurrent.find(" .visu").fadeOut();
this.elem.find("#slide"+num).show();
this.elem.find("#slide"+num+" .visu").hide().fadeIn();


par ça :

this.elemCurrent.fadeOut();
this.elem.find("#slide"+num).show();
this.elem.find("#slide"+num).hide().fadeIn();

Voilou ca a marché pour moi :P

Fir3d Il y a 2 ans Répondre

Hello !
J'ai le meme probleme que toi Houly62 Une solution ?

Super tuto

Houly62 Il y a 2 ans Répondre

J'ai un bug :

J'ai mis des lien sur mes titres dans le carrousel, mais quand par exemple je suis au slide 3 et que je clique pour aller au slide 1 le lien n'est plus actif.

Comment régler ça svp ?

xav Il y a 2 ans Répondre

Pour le faire marcher en php (avec les images sur une bdd) tu fais comment ? Car du coup il trouve plus les slide2, slide3... uniquement le premier

Drayark Il y a 2 ans Répondre

Bonjour,

Je me suis rendu sur www.terrescreoles.com . Il fonctionne très bien de mon coté sous FF.

Erreur trouvé ?

gpisa Il y a 2 ans Répondre

Bonjour, J'ai réalisé le tuto et placé sur notre site www.terrescreoles.com. il fonctionne correctement sous ie mais pas sous ff. auriez vous une idée du pourquoi ?

seer Il y a 2 ans Répondre

Il faut des connaissance en PHP ou c'est réalisable en Jquery

Ondine Il y a 2 ans Répondre

J'ai un probleme au niveau de la navigation :/
Elle s'affiche en double, je ne comprends pas pourquoi, j'ai comparé chaque millimetre de mon code au votre, mais en vain. Quelqu'un pourrait m'aider ?
http://b0rdelique.free.fr/portfolio.php
http://b0rdelique.free.fr/slider.css
http://b0rdelique.free.fr/js/slider.js

Merci

Houly62 Il y a 2 ans Répondre

Après un avoir eu un bug dès que tous mes slides étaient vus une fois. Je me suis dit qu'il y avait peut-être des erreur de syntaxe.

Et c'était le cas j'avais oublié 2 point virgules (au bout des lignes) et un . avant visu sur cette ligne --> this.elemCurrent.find(".visu").fadeOut();

Maintenant tous marche impeccablement bien !
Un grand merci pour ton Tuto super bien expliqué, BRAVO !

rafaelk94 Il y a 2 ans Répondre

Encore une fois super tutos !

J'aimerais savoir comment crée un pagination sans texte dans les span ? juste les petit point blanc j'ai essayer moi même mais je n'y arrive pas.

zazen Il y a 2 ans Répondre

Merci bcp pour ce tuto ;-)

pascalito Il y a 2 ans Répondre

Les carrousels et mootools sont partout; que nous reserve l'année 2012 ? un carrousel en real 3D

djbynight Il y a 2 ans Répondre

Hello , merci pour ce super tuto j'ai réalisé avec succès le carrousel.

2 petits problème me tracas:
1 j'aimerais mettre 7 carrousel sur une même page je n'y arrive pas pour l'instant j'ai copié 7x le code html et j'ai juste le premier carrousel qui est ok et pour les autres j'ai juste la dernière image en vue.
2 Peux-t-on changer les images du carrousel avec le tuto de portfolio en php que vous avez dans la liste des tuto comme ca les utilisateurs du site pourrais charger eux même leurs photos.
Merci d'avance pour les réponses.

lynxtyler Il y a 2 ans Répondre

Bonjour ! Et merci pour ce super Tutoriel !

Cependant, j'ai un léger problème avec IE, alors que tous les autres navigateurs répondent correctement.

Le problème vient de la pagination. Au démarrage de l'animation, les slides défilent bien, mais la pagination reste bloquer à 1. Ce n'est qu'au passage du pointeur de la souris, que mon animation reprend.

Bref un peu dérangent comme bug (vive IE). Il y a t'il quelqu'un qui a rencontré le même problème que moi ? Et si oui peut 'il m'aider ?

Vocos Il y a 2 ans Répondre

Grafikart, t'es un génie !
Je l'ai utilisé pour ma galerie photo !

Kayle Il y a 2 ans Répondre

Chapeau !! merci encore pour tout c'est tuto super et gratuit j'espère que tout ton travail payera un jour tu le mérite vraiment merci encore et bonne continuation

balve Il y a 2 ans Répondre

Je constate cependant un autre problème, si on clique sur le numéro de la première slide alors qu'on avait passé cette vignette (en etant à ce moment sur la deuxieme slide par exemple), on reste bloqué sur cette slide n°1.

balve Il y a 2 ans Répondre

Pour info mon problème venait de là :
.navigation span:active
Qui decait plutot être :
.navigation span.active
:(

balve Il y a 2 ans Répondre

Y en a t'il d'autre que moi qui arrive à faire l'ensemble du tuto sauf les changements de class:active pour la coloration des numéros ???

Cedric Il y a 2 ans Répondre

(Désolé pour ce long post)
J'ai utilisé mon joker "coup de fil à un ami" et je suis maintenant en mesure de vouss proposer la version qui fonctionne avec plusieurs carrousels sur une page...

En gros : il faut en fait une "classe carousel" (fonction carousel en js) pour pouvoir instancier plusieurs carousels :
var car1 = new carrousel($("#votreID1"));
var car2 = new carrousel($("#votreID2"));
J'ai donc du réecrire l'objet carrousel pour le transformer en "class" javascript, puis j'ai modifié la tête du constructeur pour pouvoir faire varier la duree, enfin j'avais besoin d'une reference sur l'objet crée afin de l'incrementer (pour le play auto), ce qui donne :
var car1 = new carrousel("#votreID1", 'car1', 400);
var car2 = new carrousel("#votreID1", 'car2', 1200);

Notez enfin que dans le HTML, les <div class="slide" id="slideN"> sont à remplacer par des <div class="slide slideN">
--------------------------------------------------------
var carrousel = function(id, ref, duration){
this.nbSlide=0;
this.nbCurrent=1;
this.elemCurrent=null;
this.elem=null;
this.timer=null;
this.self=null;


this.init = function(id, ref, duration){
this.elem = $('#'+id);
if (this.elem != undefined){
this.self = this;
this.nbSlide=this.elem.find(".slide").size();
this.elem.append('<div class="navigation"></div>');
for(var i=1;i<=this.nbSlide;i++){
this.elem.find(".navigation").append("<span>"+i+"</span>");
}
this.elem.find(".navigation span").click(function(){this.gotoSlide($(this).text());});
this.elem.find(".slide").hide();
this.elem.find(".slide:first").show();
this.elemCurrent=this.elem.find(".slide:first");
this.elem.find(".navigation").css("opacity",0.6);
this.elem.find(".navigation span:first").addClass("active");
this.ref = ref;
this.duration = duration;
this.elem.mouseover(this.stop);
this.elem.mouseout(this.play(ref, duration));
}
};



this.gotoSlide = function(num){
if(num==this.nbCurrent){return false;}
this.elemCurrent.fadeOut();
this.elem.find(".slide"+num).show();
this.elem.find(".slide"+num).hide().fadeIn();
var titleHeight=this.elemCurrent.find(".title").height();
this.elemCurrent.find(".title").animate({"bottom":-titleHeight},500);
this.elem.find(".slide"+num+" .title").css("bottom",-titleHeight).animate({"bottom":0},500);
this.elem.find(".navigation span").removeClass("active");
this.elem.find(".navigation span:eq("+(num-1)+")").addClass("active");
this.nbCurrent=num;
this.elemCurrent=this.elem.find(".slide"+num);
return true;
};

this.next = function(){
var num=this.nbCurrent+1;
if(num>this.nbSlide){num=1;}
this.gotoSlide(num);
};

this.prev = function(){
var num=this.nbCurrent-1;
if(num<1){num=this.nbSlide;}
this.gotoSlide(num);
};
this.stop = function(){
window.clearInterval(this.timer);
};

this.play = function(obj, duration){
window.clearInterval(this.timer);
this.timer =window.setInterval('document.'+obj+'.next()',duration);
};

//Trigger init
this.init(id, ref, duration);
this.play(this.ref, this.duration);

};

$(document).ready(function(){
this.car1 = new carrousel("carousselHP1", 'car1', 2000);
this.car2 = new carrousel("carousselHP2", 'car2', 4000);

});

Cedric Il y a 2 ans Répondre

Personne pour me dire comment je dois m'y prendre pour afficher plusieurs carrousels sur une seule page?

zaaazaaza Il y a 2 ans Répondre

bonjour j'ai un problème, quand je clique sur un chiffre l'image ne s'affiche pas, sauf si je reclique sur le 1

Manu.11400 Il y a 2 ans Répondre

Merci bien, au debut il n'y etait pas, peut etre que mon payement etait pas encore pris en compte.

Baptiste Il y a 2 ans Répondre

A droite tu as un zip à charger... Mais il faut quand même faire le tutoriel, ça n'apporte rien de le charger tout fait...

Jiyong Il y a 2 ans Répondre

Bonjour

Je me demander comment intégrer ce carrousel en utilisant wordpress, en remplaçant notamment les "ID" slides par des "ID post" (ce de wordpress) il y a une solution ?

merci

Cedric Il y a 2 ans Répondre

Bonjour,

Avant tout merci pour ce tuto si clair.
J'ai un problème tout de même: j'essaie d'afficher plusieurs carrousels sur la même page et les variables sont systématiquement écrasées par le dernier des carrousels affichés (il n'y a donc qu'un carrousel qui tourne).

Quelqu'un a t-il la solution pour afficher avec ce script, plusieurs carrousels sur une seule page sans pour autant avoir à écrire un plugin JQuery?

Merci par avance à tous!

Chiper Il y a 2 ans Répondre

Bonjour, je souhaiterais remplacer les <span>1</span> etc... par une miniature d'une image définit dans chacun des slide ?

Le_viking Il y a 2 ans Répondre

De rien

Je trouvais ça embêtant de pas pouvoir mettre du HTML dans les slides

Pampa Il y a 2 ans Répondre

Desolé pour le double post mais il y a quelque chose de prévu si js est désactivé ?
En tout cas je suis fan de ton travail. Merci pour tout ce que tu fais GK.

Pampa Il y a 2 ans Répondre

Coucou,
j'ai une petite question. En faite j'ai essayé de mettre un lien quand on clic sur un slide. Je l'ai fais via le php. Ca fonctionne mais une seul fois. Après un tour complet les lien ne fonctionne plus.
Je suppose qu'il faudrait les ajouter au js. Mais comment faire ?

Tom Il y a 2 ans Répondre

Re-bonjour, Quelqu'un pourrait me conseiller par rapport à mon problème svp ? (cf juste au dessus)
Le HTML se désactive après le premier passage (testé avec Firefox, Chrome et IE).

Merci

kittypaw Il y a 2 ans Répondre

Bonjour,

Tout d'abord merci pour ce tutoriel qui m'a beaucoup aidé!

Cependant, tout comme MiisterTii, celui-ci ne marche pas sous IE(les slides ne défilent pas toutes seules et le fait de cliquer sur les numéro n'a aucun effet)!

Je n'arrive pas à savoir pourquoi car sous tous les autres navigateurs cela fonctionne parfaitement! De plus, Firebug ne m'affiche aucune erreur.

Merci

dixi Il y a 2 ans Répondre

Bonsoir,

Tout d'abord merci pour ce super tuto.
J'aurais aimé utiliser ce carrousel comme menu, mais le soucis c'est que dès que la page se recharge il revient à ça position initiale, ce qui est normal. Mon problème est donc le suivant: Comment faire pour que quand je clique sur n'importe quel image de mon menu carrousel, au rechargement de la page il reste dans la position ou l'image est visible? Sachant aussi que je peut avoir un lien sur une page qui mène vers une autre, ce qui complique encore plus la chose.
Merci d'avance pour votre aide

Tom Il y a 2 ans Répondre

J'ai re-testé en utilisant les fichiers (css et js) utilisés sur la démonstration de Grafikart, dont le html fonctionne parfaitement, mais le problème persiste sur mon site.

J'en conclue que ça ne peut venir que de ma librairie jquery, j'ai pourtant téléchargé la dernière version.

Ou alors un conflit avec autre chose sur mes pages ?

Tom Il y a 2 ans Répondre

Bonjour,

J'ai moi aussi le problème du HTML qui se bloque suite à partir du deuxième défilement. J'ai vu que plusieurs personnes ont rencontré ce problème, et qu'il fallait changer "this.timer" par "carrousel.timer" pour le corriger, mais je n'ai pas de "this.timer" dans mon JS.

Du coup je ne sais pas que faire.
Pouvez vous jeter un oeil à mon carrousel svp pour me mettre sur la voie, je n'arrive pas à localiser le problème.

le carrousel : http://www.montpellierinteractif.com/
le JS : http://www.montpellierinteractif.com/carrousel/carrousel.js


Merci

khandary Il y a 2 ans Répondre

Merci, ce tuto est bien mais moi aussi j'ai le contenu HTML qui bloque apres passage du slide sous firefox ou autres. Par contre sur IE 8, ça passe nikel.

quelqu'un a une solution ?

ilyesn Il y a 2 ans Répondre

Merci pour le tuto bien expliqué comme d'habitude, dommage que le contenu HTML est bloqué (lien, texte) après être déjà passé sur le slide.

jbie Il y a 2 ans Répondre

Bonjour tout d'abord un grand merci pour ton travail, ensuite j'ai une petite question, je n'arrive pas à remplacer les chiffres par des points comme sur grafikart.fr/portfolio.
Est-ce que quelqu'un pourrait m'aider ?

nestam Il y a 2 ans Répondre

Par contre moi j ai un soucis par rapport au nombre de slide
quand je mets une alert au moment c est defini dans l article firefox me met undefined.
va savoir

bast_65 Il y a 2 ans Répondre

je pense que les id slide+num sont en fait en double,a mon avis c'est sa qu'il n'aime pas même si il est sensé cibler par rapport a l' id parent carrousel. Comment on peut arranger sa ?

bast_65 Il y a 2 ans Répondre

Bonjour,
j'essai de réutiliser le carroussel, il doit y en avoir 2 sur la page, ce système d'instence est donc tout indiquer, seulement problème:
il trouve bel et bien le bon de slide pour chaque carrousel,mais la paginationet le timer marche que pour le dernier.Je pense qu'il ya conflit entre 2 surtout quelorsque je clique sur la pagination du premier carrousel, il me le fait sur le second.Ou est l'erreur ?
merci d'avance

Riri Il y a 2 ans Répondre

Vraiment génial, merci merci merci !!

Ravi Il y a 2 ans Répondre

merci beaucoup ^^

Galithiel Il y a 2 ans Répondre

Mouarf, on peut pas éditer les commentaires

Enfin bref, en fait le script marche, mais avec une page de décalage vers la gauche, ainsi le bouton "C" affichera la page "B", le "D" la page "C", etc...

Je n'arrive malheureusement pas à régler ce problème
Merci d'avance

Galithiel Il y a 2 ans Répondre

Re,

Tout d'abord, merci de ta réponse, j'ai essayé de recoder le systeme pour en arriver à ça :
http://www.simplecommunity.fr/divers/js/js_2.txt

Mais lorsque je clique sur un des boutons de la pagination, le script ne fait rien du tout.
Je pense donc que c'est "carrousel.gotoSlide(this.id);" que je dois remplacer par autre chose, cependant, je ne vois pas vraiment quoi

Merci d'avance

Pro-Designer Il y a 2 ans Répondre

Salut .
dommage il veut pas marché avec moi , je ne sais pas pourquoi !!.

Thomas Il y a 2 ans Répondre

Super tuto,
j'aimerais inversé la numerotation des span au lieu d'afficher 1,2,3 ... afficher dans l'ordre décroissant en premier le dernier ..,3,2,1
Apres plusieurs essais je n'y arrive pas avez vous une piste à me donner

Pobourger Il y a 2 ans Répondre

Alors pour ma part je tien a te remercier car tout marche très bien Ted très bon tuto comme DAB !! Ps: un tutoriel sur la personification des tableaux et des champ de commentaire s'être la bien venu

joska Il y a 2 ans Répondre

Encore une fois super tuto.
Si je peux me permettre j'ai trouvé un autre tuto dans le même genre qui explique comment faire un carroussel infini.
Ca pourrait en interesser certain alors je laisse le lien ici
http://jqueryfordesigners.com/jquery-infinite-carousel/
Merci encore

Djpaulo Il y a 2 ans Répondre

Moi il me manquer un point virgule (;) a la fin de cette ligne :

carrousel.timer=window.setInterval("carrousel.next()",4000);

WoaWorld Il y a 2 ans Répondre

Merci

Nouipoz Il y a 2 ans Répondre

Génial ce Tutoriel comme d'hab :D , merci

OverSpeed Il y a 2 ans Répondre

Très bon tuto comme d'habitude

syn Il y a 2 ans Répondre

Merci pour ce tuto

LimeCitrus Il y a 2 ans Répondre

Encore une fois tu cartonnes!!!! thanks a lot.

valentin45000 Il y a 2 ans Répondre

Bonjour j'ai mis un lien sur les images mais quand on clique dessus il nous affiche une légère bordure violette :
http://nsa10.casimages.com/img/2009/11/24/091124122821527213.jpg

Comment la supprimmer ?

KaKuZa` Il y a 2 ans Répondre

Ayé ! J'suis amoureux du Carrousel <3333

tontonrimka Il y a 2 ans Répondre

Tuto Monstrueux

h7u84360 Il y a 2 ans Répondre

je crois que j'ai compris !!!

tchev Il y a 2 ans Répondre

si sa arrive a quelqu'un à le problème : Dans votre profil votre adresse internet n'est pas valide.

Darrelo2 Il y a 2 ans Répondre

Merci c'est vraiment gentil ! T' es trop génial.

cerise Il y a 2 ans Répondre

youpy le voici je suis trop contente
merci vraiment

Baptiste Il y a 2 ans Répondre

excellent ça! encore un tuto de qualité et bien expliqué!

lioninho Il y a 2 ans Répondre

Thanks ce tuto me sera très utile pour un projet que je suis entrain de réaliser.

Zike Il y a 2 ans Répondre

Super comme tuto. :D

Laink Il y a 2 ans Répondre

Encore un tuto génial, merci.

Pro-Designer Il y a 2 ans Répondre

Salut GA .. bon tuto .. c'est tres important pour moi , parce que je suis entrain de faire un potfolio pour moi ..
Merci frero ..

lemirandais Il y a 2 ans Répondre

Je rentre chez moi et je regarderais ton tutoriel même si c'est déjà une sorte de caroussel sur mon site.
Déjà des idées pour le ou les prochains tutoriels.
Des idées, comment faire une bonne atomique? Je blague bien sur, bon courage pour la suite....

Badbart Il y a 2 ans Répondre

Bon tuto. A mon avis les commentaires de demande d'aide vont affluer d'ici pas tard.

Ritter jack Il y a 2 ans Répondre

Woaw ! Les tutos fusent en ce moment ! Super merci raton ^^

tchev Il y a 2 ans Répondre

Maintenant tu m'as dit comment fixé le problème des commentaires, je voulait juste de dire un grand merci pour tout tes tutoriels de superbes qualités!

Krusty Il y a 2 ans Répondre

Cool ! J'attendais ce tuto avec impatience :DDDD

dechuck Il y a 2 ans Répondre

Super ton tuto!!
Je regarde ça se soir en revenant de l'école!!

Merci de continuer de faire des aussi bon tuto!! :D

Remus Il y a 2 ans Répondre

héhé Merci je l'attendais depuis sont annonce sur Twitter :D

Likeo Il y a 2 ans Répondre

Mais alors ça c'est vraiment trop super sympa c'est trop utile merci beaucoup t'es trop fort !
Continue comme ça le raton !