9
votes

JQUERY SWINDER JQUERY Cliquez sur Modifier la diapositive

Im construisez mon site de portefeuille pour le moment et avez une galerie de dénseignante sur la page d'études de cas. Je souhaite que l'utilisateur puisse être capable de cliquer sur les boutons suivants ou précédents que j'ai créés et donnés aux noms de classe appelés .NEXT et .PRev. Voici mon code jQuery.

jQuery(document).ready(function($) {

    var slider = $('.gallery').unslider({
        autoplay : true,
        arrows : false,
        nav : false,
        animation : 'fade',
    });

    slider.on('unslider.ready', function() {
        $(".prev").click(function() {
            unslider('animate:prev');
        });
    });

    slider.on('unslider.ready', function() {
        $(".next").click(function() {
            unslider('animate:next');
        });
    });

});

javascript jquery jquery-plugins unslider

0 commentaires

4 Réponses :

0
votes

Vous pouvez définir flèches code> sur true code> (ou supprimer flèches: false, code> à partir de votre code puisque la valeur par défaut est true code >) ...

vous verrez Suivant code> et prev code> liens, ceux-ci modifient la diapositive, les styles de style CSS code> Vous aimez: -) p>

p>



var slider = $('.gallery').unslider({
    autoplay : true,
    nav : false,
    animation : 'fade',
});

0 commentaires

7
votes

non utilisé non limider avant, mais je pense que xxx pré>

et p> xxx pré>

doit être fort> p> xxx pré>

et p>

slider.unslider('prev');

4 commentaires

Je croirais fortement essayer de faire quelque chose qui se fait déjà est un simple gaspillage de temps ... Si leur est une option simple qui permet à Prev et le lien suivant, il est préférable d'l'utiliser au lieu d'utiliser HTML personnalisé et de le faire fonctionner avec une JS personnalisée. ...

On peut toujours utiliser CSS pour le faire paraître comme on veut;)

Dépend complètement de la situation. Je suis à la suite du fait que OP a dit "Je sais que les boutons suivants et précédents, mais je dois le faire moi-même pour l'effet prévu.";)

AAH ... a raté ce bit :-p :-)

1
votes

Dans vos fonctions de clic, vous devez dire:

$('.gallery').unslider('next');

0 commentaires

0
votes

nouvelle réponse pour

Je sais que le dénoyauter est livré avec les boutons suivants et précédents, mais je dois le faire moi-même pour l'effet souhaité. P> blockQuote>
ok maintenant Vous pouvez avoir des flèches assez jolies avec des icônes et un texte personnalisé, dans ce cas car @Alex Howes a dit que vous pouvez incorporer une fonctionnalité personnalisée. P>
maintenant, en plus d'utiliser p> xxx pré>
et p> xxx pré>
Ça ne fonctionne pas car pour moi non limider.Ready code> événement Il semblent d'être incendie, nous n'avons pas besoin de l'utiliser de toute façon, obtenez-vous simplement pour la fonctionnalité extérieure slider.on («non limider.ready», fonction () { code> et }); Code> Et cela fonctionne comme un charme :) p>
vous ressemblera à quelque chose comme ça ... p>
p>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/unslider/2.0.3/js/unslider-min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/unslider/2.0.3/css/unslider.css" rel="stylesheet" /> <div class="gallery"> <ul> <li> <img src="http://unslider.com/img/cat1.jpg" alt="Cats!"> </li> <li> <img src="http://unslider.com/img/cat2.jpg" alt="Cats!"> </li> <li> <img src="http://unslider.com/img/cat3.jpg" alt="Cats!"> </li> </ul> <div class='prev'><i class="fa fa-chevron-left" aria-hidden="true"></i> Previous slide</div> <div class='next'>Next slide <i class="fa fa-chevron-right" aria-hidden="true"></i> </div> </div>

0 commentaires