Kako izraditi klizač slike pomoću jQueryja

Ovaj će vas vodič voditi kroz izgradnju klizača slike pomoću biblioteke jQuery.

GIF prikazuje klizač u akciji

Ovaj će vodič imati četiri dijela:

  • HTML
  • SCSS
  • JS
  • Reference

HTML

Za ovaj ćemo vodič koristiti Bootstrap kako bi stvari izgledale dobro, bez trošenja puno vremena.

Naša će struktura biti sljedeća:

    Unutar naše ulklase slidesimat ćemo sljedeće:

  • U našem .buttonstečaju trebali biste imati sljedeće:

    Evo primjera kako htmlbi trebao izgledati:

    Napomena: srcAtribut slike trebali biste zamijeniti vlastitim sadržajem.

    SCSS

    Koristimo Sass i SCSS sintaksu kako bismo mogli ugnijezditi i koristiti varijable

    : heart_decoration:

    Za definiranje stila možemo koristiti sljedeći SCSS:

    // 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

    Varijable

    U sljedećem isječku koda definiramo varijable korištene kasnije u našem kodu.

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

    Koristit ćemo praznu varijablu gdje ćemo pozvati setIntervalmetodu:

    var interval;

    Animacija Umotat ćemo naše klizajuće animacije unutar funkcije:

    function startSlider() {}

    Koristimo setInterval()izvornu JavaScript metodu za automatizaciju sadržaja funkcije na vremenskom okidaču.

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

    Koristimo pausevarijablu da vidimo koliko milisekundi treba pričekati prije ponovnog poziva funkcije. Pročitajte više o izvornoj setIntervalmetodi ovdje: //developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval. Unutar naše funkcije koristit ćemo jQuery za blijeđenje između slajdova brzinom varijable animationSpeed:

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

    Ciljamo prvi slajd pomoću $('.slides > li:first'). - .fadeOut(animationSpeed)izblijedit će prvi slajd, a zatim pomoću .next(), prelazimo na sljedeći slajd. - Nakon što smo se preselili na sljedeći slajd, mi ćemo ga nestati u: .fadeIn(animationSpeed). - Ovaj će se slijed nastaviti do zadnjeg slajda ( .end()), a zatim zaustavljamo animaciju. Sada ćemo pozvati startSliderfunkciju za pokretanje animacije:

    startSlider ();

    Reprodukuj i zaustavi Ova značajka nije obavezna, ali je vrlo jednostavna za implementaciju. Skrivat ćemo gumb za reprodukciju, tako da ne vidimo i gumbe za reprodukciju i pauzu:

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

    Sada ćemo stvoriti naš gumb za pauzu (automatski se prikazuje pri učitavanju stranice):

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

    Pozvat ćemo našu funkciju svaki put kad se pritisne gumb pauze pomoću jQueryja. - Uklonit ćemo interval pomoću clearIntervalmetode i koristeći našu intervalvarijablu kao parametar, naznačujući koji interval zaustaviti. - Budući da je naš klizač pauziran, pomoću njega ćemo sakriti gumb za pauzu $(this).hide();. Napomena: koristimo this, što će se odnositi na ono što zove naš roditelj, tj .pause. - Nakon toga ćemo pokazati našu gumb za reprodukciju tako da korisnik može nastaviti animacije: $('.play').show();. Sljedeći kod postavlja naš gumb za reprodukciju (automatski se skriva pri učitavanju stranice):

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

    Pozvat ćemo našu funkciju svaki put kad se klikne gumb za reprodukciju pomoću jQueryja.

    • Interval ćemo započeti ili ponovo pokrenuti pomoću startSliderfunkcije.
    • Budući da se naš klizač trenutno reproducira, sakrit ćemo gumb za reprodukciju pomoću $(this).hide();. Napomena: koristimo this, što će se odnositi na ono što zove naš roditelj, tj .play.
    • Nakon toga ćemo pokazati našu gumb za pauzu, tako da korisnik može zaustaviti animaciju na volji: $('.pause').show();.

    Reference

    • Pogledajte ovaj vodič za izvorni kod i primjer na CodePenu.