Plug-in Cycle: Tournez la vignette du pager en curseur

Question

J'essaie de travailler sur une galerie de photos de cycle et jusqu'à présent, tout fonctionne parfaitement, mais je voulais savoir s'il était possible, tournez la vignette du pager dans un curseur.

J'essaie ce plugin SimplyScroll et malheureusement, cela ne fonctionne pas.Je ne sais pas pourquoi peut-être parce qu'il y a un conflit entre deux plugin.

Je veux juste tourner le pouce comme une image ci-dessous:

Answer 1

Dans ce cas, j'ai constaté qu'il est préférable de changer le plugin que vous avez utilisé, j'ai donc constaté que ce plugin peut le gérer facilement.

https://adgallery.codeplex.com/

La galerie d'annonce a déjà glissé la vignette dans la partie inférieure de l'image et facile à utiliser.

Answer 2

Il y a un plug-in de curseur sur GitHub Lien vers GitHub Page J'ai trouvé cela semblable à votre curseur Et vous pouvez voir la démonstration en direct du curseur à prithgupta.com/demos/templates/vivid-photo/ Les vignettes glissent sur l'événement MOUSEMOVE

Puis je modifiai légèrement cela en ajoutant ma fonction personnalisée pour glisser automatiquement la vignette

  for (var i = 0; i < 1500; i=i+30) {
     $thumbScroller_container.animate({left:-i}, $scrollEasing,$scrollEasingType); 
   }

à l'origine, c'était

$thumbScroller.mousemove(function(e){
        if($thumbScroller_container.width()>sliderWidth){
            var mouseCoords=(e.pageX - $placement[1]);
            var mousePercentX=mouseCoords/sliderWidth;
            var destX=-((((totalContent+($tsMargin*2))-(sliderWidth))-sliderWidth)*(mousePercentX));
            var thePosA=mouseCoords-destX;
            var thePosB=destX-mouseCoords;
            if(mouseCoords>destX){
                $thumbScroller_container.stop().animate({left: -thePosA}, $scrollEasing,$scrollEasingType); //with easing
            } else if(mouseCoords<destX){
                $thumbScroller_container.stop().animate({left: thePosB}, $scrollEasing,$scrollEasingType); //with easing
            } else {
                $thumbScroller_container.stop();  
            }
        }
});

maintenant, cela fonctionnera comme indiqué dans la requête Ceci est modifié Aperçu Lien vers Demo js fichier que j'ai édité Page Galerie J'ai édité Si vous souhaitez accéder à un événement comme Click in jQuery, vous pouvez utiliser la gâchette pour cette