Acest tutorial vă va ajuta să construiți un glisor de imagine folosind jQuery bibliotecă.

GIF arată Slider în acțiune

Acest tutorial va avea patru părți:

HTML

Vom folosi Bootstrap pentru ca acest tutorial să păstreze lucrurile bine, fără a petrece mult timp.

Structura noastră va fi următoarea:

<div class="container">

  <!-- The wrapper for our slider -->
  <div class="slider">
    <ul class="slides"><!-- Each image will be inside this unordered list --></ul>
  </div>

  <div class="buttons"><!-- Pause and play buttons will go in here --></div>

</div>

În interiorul nostru ul cu clasa de slides vom avea următoarele:

<li class="slide"><img src="https://www.freecodecamp.org/news/how-to-build-an-image-slider-with-jquery/#" /></li>
<li class="slide"><img src="https://www.freecodecamp.org/news/how-to-build-an-image-slider-with-jquery/#" /></li>
<li class="slide"><img src="https://www.freecodecamp.org/news/how-to-build-an-image-slider-with-jquery/#" /></li>
<li class="slide"><img src="https://www.freecodecamp.org/news/how-to-build-an-image-slider-with-jquery/#" /></li>
<li class="slide"><img src="https://www.freecodecamp.org/news/how-to-build-an-image-slider-with-jquery/#" /></li>

În interiorul nostru .buttons clasa ar trebui să aveți următoarele:

<button type="button" class="btn btn-default pause">
	<span class="glyphicon glyphicon-pause"></span>
</button>
<button type="button" class="btn btn-default play">
	<span class="glyphicon glyphicon-play"></span>
</button>

Iată un exemplu de ceea ce html ar trebui să arate ca:

Notă: ar trebui să înlocuiți imaginea src atribuie cu propriul tău conținut.

<div class="container">

  <div class="slider">
    <ul class="slides">
      <li class="slide"><img src="https://unsplash.it/1280/720/?image=120" /></li>
      <li class="slide"><img src="https://unsplash.it/1280/720/?image=70" /></li>
      <li class="slide"><img src="https://unsplash.it/1280/720/?image=50" /></li>
      <li class="slide"><img src="https://unsplash.it/1280/720/?image=170" /></li>
      <li class="slide"><img src="https://unsplash.it/1280/720/?image=190" /></li>
    </ul>
  </div>

  <div class="buttons">
    <button type="button" class="btn btn-default pause">
      <span class="glyphicon glyphicon-pause"></span>
    </button>
    <button type="button" class="btn btn-default play">
      <span class="glyphicon glyphicon-play"></span>
    </button>
  </div>

</div>

SCSS

Folosim Sass și sintaxa SCSS, astfel încât să putem cuibări și să utilizăm variabile

: decor_inimii:

Putem folosi următoarele SCSS pentru a ne defini stilul:

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

Variabile

În următorul fragment de cod, definim variabilele utilizate mai târziu în codul nostru.

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

Vom folosi o variabilă goală unde vom apela setInterval metodă:

var interval;

Animație Vom înfășura animațiile glisante într-o funcție:

function startSlider() {}

Folosim setInterval() metodă nativă JavaScript pentru a automatiza conținutul funcției pe un declanșator bazat pe timp.

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

Noi folosim pause variabilă pentru a vedea câte milisecunde așteptați înainte de a apela din nou funcția. Citiți mai multe despre nativ setInterval metodă aici: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval. În interiorul funcției noastre vom folosi jQuery pentru a estompa între diapozitive la viteza variației animationSpeed:

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

Direcționăm primul diapozitiv folosind $('.slides > li:first'). – .fadeOut(animationSpeed) va dispărea primul diapozitiv și apoi va folosi .next(), trecem la următorul diapozitiv. – Odată ce ne-am mutat la următorul diapozitiv, îl vom estompa în: .fadeIn(animationSpeed). – Această secvență va continua până la ultima diapozitivă (.end()), apoi oprim animația. Acum vom apela la startSlider funcție pentru a porni animația:

startSlider ();

Joacă și Pauză Această caracteristică este opțională, dar destul de ușor de implementat. Vom ascunde butonul de redare, astfel încât să nu vedem atât butoanele de redare, cât și butoanele de pauză:

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

Vom crea acum butonul nostru de pauză (afișat automat la încărcarea paginii):

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

Ne vom apela funcția de fiecare dată când se face clic pe butonul pauză folosind jQuery. – Vom elimina intervalul folosind clearInterval metoda și folosirea noastră interval variabilă ca parametru, indicând intervalul de oprire. – Deoarece glisorul nostru este întrerupt, vom ascunde butonul de pauză folosind $(this).hide();. Notă: folosim this, care se va referi la ceea ce părintele nostru numește adică .pause. – Vom afișa apoi butonul nostru de redare, astfel încât utilizatorul să poată relua animația: $('.play').show();. Următorul cod configurează butonul nostru de redare (ascuns automat la încărcarea paginii):

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

Ne vom apela funcția de fiecare dată când se face clic pe butonul de redare folosind jQuery.

  • Vom începe sau vom reporni intervalul folosind startSlider funcţie.
  • Deoarece glisorul nostru se joacă în prezent, vom ascunde butonul de redare folosind $(this).hide();. Notă: folosim this, care se va referi la ceea ce părintele nostru numește adică .play.
  • Vom afișa apoi butonul nostru de pauză, astfel încât utilizatorul să poată opri animația după bunul plac: $('.pause').show();.

Referințe

  • Verificați codul sursă și exemplul pe CodePen pentru acest tutorial.