Défilement automatique avec jquery carousel

Fermé
interneyt Messages postés 11 Date d'inscription vendredi 21 mars 2014 Statut Membre Dernière intervention 19 septembre 2014 - 23 mai 2014 à 11:54
interneyt Messages postés 11 Date d'inscription vendredi 21 mars 2014 Statut Membre Dernière intervention 19 septembre 2014 - 24 mai 2014 à 15:48
Bonjour,

J'ai utilisé pour mon site le jquery carousel pour faire défiler des images, seulement, comme je suis assez nul en javascript, je ne l'ai pas fait moi-même, je l'ai pris sur un autre site et j'ai modifié les css selon mes besoins, jusque là pas de problème.
Maintenant je voudrais que mes images défilent automatiquement sans qu'on ait besoin de cliquer à chaque fois. J'ai tenté, en suivant un tutoriel, de rajouter un timer mais je n'y suis pas arrivé.
Quelqu'un pourrait-il m'aider ?

Je mets ci-dessous mon fichier javascript :

(function($) {
var aux = {
// navigates left / right
navigate : function( dir, $el, $wrapper, opts, cache ) {

var scroll = opts.scroll,
factor = 1,
idxClicked = 0;

if( cache.expanded ) {
scroll = 1; // scroll is always 1 in full mode
factor = 3; // the width of the expanded item will be 3 times bigger than 1 collapsed item
idxClicked = cache.idxClicked; // the index of the clicked item
}

// clone the elements on the right / left and append / prepend them according to dir and scroll
if( dir === 1 ) {
$wrapper.find('div.ca-item:lt(' + scroll + ')').each(function(i) {
$(this).clone(true).css( 'left', ( cache.totalItems - idxClicked + i ) * cache.itemW * factor + 'px' ).appendTo( $wrapper );
});
}
else {
var $first = $wrapper.children().eq(0);

$wrapper.find('div.ca-item:gt(' + ( cache.totalItems - 1 - scroll ) + ')').each(function(i) {
// insert before $first so they stay in the right order
$(this).clone(true).css( 'left', - ( scroll - i + idxClicked ) * cache.itemW * factor + 'px' ).insertBefore( $first );
});
}

// animate the left of each item
// the calculations are dependent on dir and on the cache.expanded value
$wrapper.find('div.ca-item').each(function(i) {
var $item = $(this);
$item.stop().animate({
left : ( dir === 1 ) ? '-=' + ( cache.itemW * factor * scroll ) + 'px' : '+=' + ( cache.itemW * factor * scroll ) + 'px'
}, opts.sliderSpeed, opts.sliderEasing, function() {
if( ( dir === 1 && $item.position().left < - idxClicked * cache.itemW * factor ) || ( dir === -1 && $item.position().left > ( ( cache.totalItems - 1 - idxClicked ) * cache.itemW * factor ) ) ) {
// remove the item that was cloned
$item.remove();
}
cache.isAnimating = false;
});
});

},
// opens an item (animation) -> opens all the others
openItem : function( $wrapper, $item, opts, cache ) {
cache.idxClicked = $item.index();
// the item's position (1, 2, or 3) on the viewport (the visible items)
cache.winpos = aux.getWinPos( $item.position().left, cache );
$wrapper.find('div.ca-item').not( $item ).hide();
$item.find('div.ca-content-wrapper').css( 'left', cache.itemW + 'px' ).stop().animate({
width : cache.itemW * 2 + 'px',
left : cache.itemW + 'px'
}, opts.itemSpeed, opts.itemEasing)
.end()
.stop()
.animate({
left : '0px'
}, opts.itemSpeed, opts.itemEasing, function() {
cache.isAnimating = false;
cache.expanded = true;

aux.openItems( $wrapper, $item, opts, cache );
});

},
// opens all the items
openItems : function( $wrapper, $openedItem, opts, cache ) {
var openedIdx = $openedItem.index();

$wrapper.find('div.ca-item').each(function(i) {
var $item = $(this),
idx = $item.index();

if( idx !== openedIdx ) {
$item.css( 'left', - ( openedIdx - idx ) * ( cache.itemW * 3 ) + 'px' ).show().find('div.ca-content-wrapper').css({
left : cache.itemW + 'px',
width : cache.itemW * 2 + 'px'
});

// hide more link
aux.toggleMore( $item, false );
}
});
},
// show / hide the item's more button
toggleMore : function( $item, show ) {
( show ) ? $item.find('a.ca-more').show() : $item.find('a.ca-more').hide();
},
// close all the items
// the current one is animated
closeItems : function( $wrapper, $openedItem, opts, cache ) {
var openedIdx = $openedItem.index();

$openedItem.find('div.ca-content-wrapper').stop().animate({
width : '0px'
}, opts.itemSpeed, opts.itemEasing)
.end()
.stop()
.animate({
left : cache.itemW * ( cache.winpos - 1 ) + 'px'
}, opts.itemSpeed, opts.itemEasing, function() {
cache.isAnimating = false;
cache.expanded = false;
});

// show more link
aux.toggleMore( $openedItem, true );

$wrapper.find('div.ca-item').each(function(i) {
var $item = $(this),
idx = $item.index();

if( idx !== openedIdx ) {
$item.find('div.ca-content-wrapper').css({
width : '0px'
})
.end()
.css( 'left', ( ( cache.winpos - 1 ) - ( openedIdx - idx ) ) * cache.itemW + 'px' )
.show();

// show more link
aux.toggleMore( $item, true );
}
});
},
// gets the item's position (1, 2, or 3) on the viewport (the visible items)
// val is the left of the item
getWinPos : function( val, cache ) {
switch( val ) {
case 0 : return 1; break;
case cache.itemW : return 2; break;
case cache.itemW * 2 : return 3; break;
}
}
},
methods = {
init : function( options ) {

if( this.length ) {

var settings = {
sliderSpeed : 500, // speed for the sliding animation
sliderEasing : 'easeOutExpo',// easing for the sliding animation
itemSpeed : 500, // speed for the item animation (open / close)
itemEasing : 'easeOutExpo',// easing for the item animation (open / close)
scroll : 1 , // number of items to scroll at a time
};

return this.each(function() {

// if options exist, lets merge them with our default settings
if ( options ) {
$.extend( settings, options );
}

var $el = $(this),
$wrapper = $el.find('div.ca-wrapper'),
$items = $wrapper.children('div.ca-item'),
cache = {};

// save the with of one item
cache.itemW = $items.width();
// save the number of total items
cache.totalItems = $items.length;

// add navigation buttons
if( cache.totalItems > 3 )
$el.prepend('<div class="ca-nav"><span class="ca-nav-prev">Previous</span><span class="ca-nav-next">Next</span></div>')

// control the scroll value
if( settings.scroll < 1 )
settings.scroll = 1;
else if( settings.scroll > 3 )
settings.scroll = 3;

var $navPrev = $el.find('span.ca-nav-prev'),
$navNext = $el.find('span.ca-nav-next');

// hide the items except the first 3
$wrapper.css( 'overflow', 'hidden' );

// the items will have position absolute
// calculate the left of each item
$items.each(function(i) {
$(this).css({
position : 'absolute',
left : i * cache.itemW + 'px'
});
});




// click to open the item(s)
$el.find('a.ca-more').live('click.contentcarousel', function( event ) {
if( cache.isAnimating ) return false;
cache.isAnimating = true;
$(this).hide();
var $item = $(this).closest('div.ca-item');
aux.openItem( $wrapper, $item, settings, cache );
return false;
});

// click to close the item(s)
$el.find('a.ca-close').live('click.contentcarousel', function( event ) {
if( cache.isAnimating ) return false;
cache.isAnimating = true;
var $item = $(this).closest('div.ca-item');
aux.closeItems( $wrapper, $item, settings, cache );
return false;
});

// navigate left
$navPrev.bind('click.contentcarousel', function( event ) {
if( cache.isAnimating ) return false;
cache.isAnimating = true;
aux.navigate( -1, $el, $wrapper, settings, cache );
});

// navigate right
$navNext.bind('click.contentcarousel', function( event ) {
if( cache.isAnimating ) return false;
cache.isAnimating = true;
aux.navigate( 1, $el, $wrapper, settings, cache );
});

// adds events to the mouse
$el.bind('mousewheel.contentcarousel', function(e, delta) {
if(delta > 0) {
if( cache.isAnimating ) return false;
cache.isAnimating = true;
aux.navigate( -1, $el, $wrapper, settings, cache );
}
else {
if( cache.isAnimating ) return false;
cache.isAnimating = true;
aux.navigate( 1, $el, $wrapper, settings, cache );
}
return false;
});

});
}
}
};



$.fn.contentcarousel = function(method) {
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.contentcarousel' );
}
};

})(jQuery);
A voir également:

5 réponses

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
Modifié par Pitet le 23/05/2014 à 12:20
Salut,

Quel quantité de code ! Pas besoin de réinventer la roue, il existe de nombreux plugin jquery pour construire un carrousel sans écrire une seule ligne de javascript.

Tu peux par exemple utiliser le plugin jquery Cycle2 : http://jquery.malsup.com/cycle2/

Pour te prouver la facilité d'utilisation de ce plugin, tu peux voir ici la démo d'un carrousel basique : http://jquery.malsup.com/cycle2/demo/basic.php
En résumé pour faire ton carrousel avec Cycle2 :
- ajouter les scripts JQuery et Cycle2 à ta page html
- construire le code html de ton carrousel et lui attribuer la classe css cycle-slideshow
- et voilà

Bonne journée
1
interneyt Messages postés 11 Date d'inscription vendredi 21 mars 2014 Statut Membre Dernière intervention 19 septembre 2014 1
24 mai 2014 à 15:48
Oui, je n'avais pas vu ça, merci beaucoup, ça marche très bien !!!
1
interneyt Messages postés 11 Date d'inscription vendredi 21 mars 2014 Statut Membre Dernière intervention 19 septembre 2014 1
23 mai 2014 à 12:28
Merci beaucoup pour ta réponse rapide ! Je vais tenter ça...
0
interneyt Messages postés 11 Date d'inscription vendredi 21 mars 2014 Statut Membre Dernière intervention 19 septembre 2014 1
23 mai 2014 à 15:37
En effet, c'était beaucoup plus simple et plus rapide !

Il marche très bien mais il me reste quand même un souci. J'avais prévu d'y insérer une animation flash et pour cela il me faut utiliser une balise <object> mais l'animation n'apparaît pas comme les autres images dans le carousel, elle apparaît en dessous, je ne peux pas l'appeler dans une balise <img>.

Avez-vous une solution ? Merci d'avance !!!
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
23 mai 2014 à 16:16
Oui : il y a beaucoup d'exemple sur la page demo du site, notamment l'exemple Non-Image Slides : http://jquery.malsup.com/cycle2/demo/non-image.php

Il faut en fait utiliser l'attribut data-cycle-slides pour définir quels sont les éléments à considérer comme des slides.
0