Comment créer un curseur d'image avec jQuery

Ce didacticiel vous guidera tout au long de la création d'un curseur d'image à l'aide de la bibliothèque jQuery.

GIF montrant Slider en action

Ce tutoriel comprendra quatre parties:

  • HTML
  • SCSS
  • JS
  • Références

HTML

Nous utiliserons Bootstrap pour ce didacticiel afin de garder les choses en bon état, sans passer beaucoup de temps.

Notre structure sera la suivante:

    À l'intérieur de notre ulavec la classe de, slidesnous aurons les éléments suivants:

  • Dans notre .buttonsclasse, vous devriez avoir ce qui suit:

    Voici un exemple de ce à quoi vous htmldevriez ressembler:

    Remarque: vous devez remplacer l' srcattribut image par votre propre contenu.

    SCSS

    Nous utilisons Sass et la syntaxe SCSS afin de pouvoir imbriquer et utiliser des variables

    : heart_decoration:

    Nous pouvons utiliser le SCSS suivant pour définir notre style:

    // Variables $width: 720px; .slider { width: $width; height: 400px; overflow: hidden; margin: 0 auto; text-align: center; .slides { display: block; width: 6000px; height: 400px; margin: 0; padding: 0; } .slide { float: left; list-style-type: none; width: $width; height: 400px; img { width: 100%; height: 100%; } } } .buttons { margin: 0; width: $width; position: relative; top: -40px; margin: 0 auto; .play { display: none; } .btn { display: flex; margin: 0 auto; text-align: center; } }

    JS

    Variables

    Dans l'extrait de code suivant, nous définissons les variables utilisées plus tard dans notre code.

    var animationSpeed = 1000; // How quickly the next slide animates. var pause = 3000; // The pause between each slide.

    Nous utiliserons une variable vide où nous appellerons la setIntervalméthode:

    var interval;

    Animation Nous allons envelopper nos animations de curseurs dans une fonction:

    function startSlider() {}

    Nous utilisons la setInterval()méthode JavaScript native pour automatiser le contenu de la fonction sur un déclencheur basé sur le temps.

    interval = setInterval(function() {}, pause);

    Nous utilisons la pausevariable pour voir combien de millisecondes attendre avant d'appeler à nouveau la fonction. En savoir plus sur la setIntervalméthode native ici: //developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval. Dans notre fonction, nous utiliserons jQuery pour fondre entre les diapositives à la vitesse de la variable animationSpeed:

    $('.slides > li:first') .fadeOut(animationSpeed) .next() .fadeIn(animationSpeed) .end() .appendTo('.slides');

    Nous ciblons la première diapositive en utilisant $('.slides > li:first'). - .fadeOut(animationSpeed)fera disparaître la première diapositive, puis en utilisant .next(), nous passons à la diapositive suivante. - Une fois que nous sommes passés à la diapositive suivante, nous allons se faner dans: .fadeIn(animationSpeed). - Cette séquence se poursuivra jusqu'à la dernière diapositive ( .end()), puis on arrête l'animation. Nous allons maintenant appeler la startSliderfonction pour démarrer l'animation:

    startSlider ();

    Lecture et pause Cette fonction est facultative, mais assez facile à mettre en œuvre. Nous allons masquer le bouton de lecture, donc nous ne voyons pas à la fois les boutons de lecture et de pause:

    $('.play').hide(); // Hiding the play button.

    Nous allons maintenant créer notre bouton de pause (affiché automatiquement au chargement de la page):

    $('.pause').click(function() { clearInterval(interval); $(this).hide(); $('.play').show(); });

    Nous appellerons notre fonction chaque fois que vous cliquerez sur le bouton pause en utilisant jQuery. - Nous supprimerons l'intervalle en utilisant la clearIntervalméthode et en utilisant notre intervalvariable comme paramètre, indiquant l'intervalle à arrêter. - Parce que notre curseur est en pause, nous masquerons le bouton de pause en utilisant $(this).hide();. Remarque: nous utilisons this, qui fera référence à ce que notre parent appelle ie .pause. - Nous montrerons ensuite notre bouton de lecture afin que l'utilisateur peut reprendre l'animation: $('.play').show();. Le code suivant configure notre bouton de lecture (automatiquement masqué lors du chargement de la page):

    $ ('. play'). click (function () {startSlider (); $ (this) .hide (); $ ('. pause'). show ();});

    Nous appellerons notre fonction chaque fois que le bouton de lecture sera cliqué en utilisant jQuery.

    • Nous allons démarrer ou redémarrer l'intervalle en utilisant la startSliderfonction.
    • Comme notre curseur est en cours de lecture, nous masquerons le bouton de lecture en utilisant $(this).hide();. Remarque: nous utilisons this, qui fera référence à ce que notre parent appelle ie .play.
    • Nous montrerons ensuite notre bouton pause afin que l'utilisateur peut arrêter l'animation à volonté: $('.pause').show();.

    Références

    • Consultez le code source et l'exemple sur CodePen pour ce didacticiel.