Ezt a bejegyzést nem tart tovább 3 percnél elovasni!

Mi is az a carousel?

Röviden egy olyan komponens ami a rajta lévő tartalmat az előre meghatározott idő fügvényében ciklikusan oldalra görgetve jeleníti meg. A carousel-nek álltalában 3-5 lapja van. Ettől természetesen az igényeidnek megfelelően eltérhetsz. Minden egyes lapon beállíthatod a hátteret, cím sort és egyéb szöveges tartalmat illeszthetsz be. Elhelyezhetsz úgy nevezett call-to-action  gombokat is. A manapság nagy népszerűségnek örvendő, teljes oldalas nyitólapok is a carouselt használják amennyiben Bootstrap alapúak.
Nézzük hogyan is kell egy carouselt beilleszteni a weboldalba.
Bootstrap Carousel

 1. Lépés – Carousel beillesztése

A Bootstrap carousel-nek saját, speciális osztályai vannak amik meghatározzák a működését. A következő formában adhatod meg:
<!--  Carousel - consult the Twitter Bootstrap docs at

      <a href="http://twitter.github.com/bootstrap/javascript.html#carousel">http://twitter.github.com/bootstrap/javascript.html#carousel</a> -->

<div id="this-carousel-id" class="carousel slide"><!-- class of slide for animation -->

  <div class="carousel-inner">

    <div class="item active"><!-- class of active since it's the first item -->

      <img src="<a href="http://placehold.it/1200x480">http://placehold.it/1200x480</a>" alt="" />

      <div class="carousel-caption">

        <p>Caption text here</p>

      </div>

    </div>

    <div class="item">

      <img src="<a href="http://placehold.it/1200x480">http://placehold.it/1200x480</a>" alt="" />

      <div class="carousel-caption">

        <p>Caption text here</p>

      </div>

    </div>

    <div class="item">

      <img src="<a href="http://placehold.it/1200x480">http://placehold.it/1200x480</a>" alt="" />

      <div class="carousel-caption">

        <p>Caption text here</p>

      </div>

    </div>

    <div class="item">

      <img src="<a href="http://placehold.it/1200x480">http://placehold.it/1200x480</a>" alt="" />

      <div class="carousel-caption">

        <p>Caption text here</p>

      </div>

    </div>

  </div><!-- /.carousel-inner -->

  <!--  Next and Previous controls below

        href values must reference the id for this carousel -->

    <a class="carousel-control left" href="#this-carousel-id" data-slide="prev">&lsaquo;</a>

    <a class="carousel-control right" href="#this-carousel-id" data-slide="next">&rsaquo;</a>

</div><!-- /.carousel -->
Miután meg van a kód be kell tölteni a JavaScript plugin-t, hogy a carousel rendesen, illetve, hogy egyálltalán működjön.

2. Lépés – Carousel JavaScript

A JQuery és a Bootstrap JavaScript könyvtárak betöltése. Amennyiben egy már fejlesztés alatt álló Bottstrap oldalba szeretnéd a carousel-t beilleszteni a következő lépéseken már valószínűleg túljutottál. Azért a rend kedvért röviden összefoglalom. A legajánlottabb módszer a JQuery könyvtár CDN-en keresztüli beillesztése. Legnagyobb előnye, hogy az oldalad gyorsabban töltődik be. Ám arra az esetre ha a CDN-en keresztül a JQuery könyvtár mégsem töltődne be a legjobb ha lokálisan is tárolod. A legfrissebb verziót innen tudod letölteni és letöltés után másold a weboldalad root könyvtárában található /js könyvtárba.
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-3.1.1.min.js"><\/script>')</script>
A második sor, JavaScript segítségével megállapítja, hogy az első sor sikeresen végrehajtódott-e vagy nem. Amennyiben a CDN-en keresztüli letöltés nem sikerült autómatikusan generál egy linket a lokálisan tárolt JQuery könyvtár eléréséhez.Az első sor megpróbálja letölteni a JQuery könyvtárat a Google oldaláról.
 A Bootstrap JQuery könyvtárat szinten be kell töltened. Ezt a lentebbi kód részlettel tudod megtenni. A teljes Bootstrap keret rendszert ami tartalmazza a szükséges JavaScript könyvtárat is innen tudod letölteni.
<script src="js/bootstrap.min.js"></script>
A fenti kódrészleteket illeszd be a weboldalad forráskódjának a végére de még a záró </body> tag elé.
Mi után sikeresen beillesztetted a Jquery könyvtárakat már csak aktiválnod kell acarousel-t.
<script>
$(document).ready(function(){
$('.carousel').carousel();
});
</script>
A fenti kód részletben csupán annyi történik, hogy amikor az oldalad betöltődött $(document).ready(function() megkeresi a .carousel osztályú elemet majd meghívja a carousel() fügvényt. hogy tegye amit tennie kell.
Mentsd el a fájlodat majd frissítsd vagy nyisd meg a böngészőben és már láthatod is a munkád gyümölcsét. Az időzítő 5 másodpercre van állítva. Ha az egeret a carousel fölé viszed az idözítö megáll!

3. Lépés – Beállítások

Az alábbi kóddal tudod beállítani a képek léptetésének időzítését. Például ha 2 másodpercenként akarod léptetni a carousel lapjait akkor 2 másodpercet millisecundumban kell megadnod a kódban azaz 2000 milliszekund:

<script>
$(document).ready(function(){
$('.carousel').carousel({
interval: 2000
});
});
</script>

4. Lépés – Képek és szöveg beillesztése

Most már csak ki kell választanod a képeket. Optimalizáld mind fájlok méretét mind a képek méret. Amikor készen van az optimalizálás csak illeszd be a fájloknevét az elérési útvonallal együtt.
Happy coding!