plugin jCarousel. Faire défiler via l'événement mouseover
Bonjour,
Je voudrais faire défiler les images du carousel en pointant avec la souris sur les boutons suivant / précédent, et non pas en cliquant ! J'ai trouvé ceci :
http://stackoverflow.com/questions/2...ing-is-hovered
Mais c'est pour jCarouselLite, et je n'ai pas su comment l'intégrer dans mon code :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| function callback_itemFirstInCallback(carousel, item, idx, state)
{
afficher(".jcarousel-item-" + (idx+1))
cacher(".jcarousel-item-"+ (idx));
}
function callback_itemFirstOutCallback(carousel, item, idx, state)
{
afficher(".jcarousel-item-" + (idx))
cacher(".jcarousel-item-"+ (idx+1));
}
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
wrap: 'circular',
vertical: true,
scroll: 1,
start: 15,
itemFirstInCallback: {
onAfterAnimation: callback_itemFirstInCallback
},
itemFirstOutCallback: {
onAfterAnimation: callback_itemFirstOutCallback
}
}); |
cependant, je pense avoir compris le principe : quand la souris est au dessus d'un des 2 bouton il faut lancer un appel périodique (avec window.setTimeout) à une fonction qui fait défiler les images : carousel.scroll(+/-1) , il faut aussi ajouter un traitement au OnMouveOut afin d'arrêter l'appel périodique , ci-dessous ce que j'ai fais, mais ça ne marche pas : il fait défiler plusieurs images en même temps :(
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| function mycarousel_initCallback(carousel)
{
carousel.buttonNext.bind('mouseover', function() {
// BAS - NEXT
window.setTimeout(carousel.scroll(-1), 10000)
});
carousel.buttonPrev.bind('mouseover', function() {
// HAUT - PREV
});
}
// ...
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
wrap: 'circular',
vertical: true,
scroll: 1,
start: 15,
itemFirstInCallback: {
onAfterAnimation: callback_itemFirstInCallback
},
itemFirstOutCallback: {
onAfterAnimation: callback_itemFirstOutCallback
},
initCallback: mycarousel_initCallback
});
}); |
