Dynamic Carousel

Bevezető

A Dynamic Carousel egy egyszerű, mondhatni eléggé puritán jellegű carousel plugin. A rendelkezésre álló paraméterek száma minimális, valamint nincs agyon bonyolítva különböző átmeneti hatásokkal, plusz nálam az addNav és addPagination opciók hibásan is működnek. Mindazonáltal (a hibás funkciók használatát mellőzve) lehetséges, hogy valakinek pont erre az egyszerűségre, célratörő megvalósításra van szüksége...

Implementálás

CSS

            <link rel="stylesheet" type="text/css" href="css/style.css" />
          

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/plugin.js"></script>
          

Deklaráció

            $(document).ready(function(){
              $('.slidewrap').carousel({
                prevSlide: '.prev',
                nextSlide: '.next'
              });
            });
          

Használat

Ha navigációs gombokat is szeretnénk használni, fontos, hogy a deklaráció során megadott osztályokat rendeljük hozzájuk, illetve hogy hivatkozásként a slider azonosítóját adjuk meg:

            <div>
              <a href="#pelda" class="next" title="Következő">Következő</a>
              <a href="#pelda" class="prev" title="Előző">Előző</a>
              <div class="slidewrap">
                <ul class="slider" id="pelda">
                  <li class="slide">
                    <h3>Slide 1</h3>
                    ...
                  </li>
                  <li class="slide">
                    <h3>Slide 2</h3>
                    ...
                  </li>
                  ...
                </ul>
              </div>
            </div>
          

Teljes paraméterlista

• slider: a plugin konténer elemének CSS szelektora (alapértelmezett: '.slider')
• slide: az egyes slide-ok CSS szelektora (alapértelmezett: '.slide')
• prevSlide: az "előző" gomb CSS szelektora (alapértelmezett: null)
• nextSlide: a "következő" gomb CSS szelektora (alapértelmezett: null)
• addPagination: lapozó használatának engedélyezése/tiltása (true | false) (alapértelmezett: false)
• addNav: navigációs gombok (előző/következő) használatának engedélyezése/tiltása (true | false) (alapértelmezett: false)
• namespace: névtér meghatározása - pl. alapbeállítás mellett az inaktív navigációs gomb CSS szelektora a következőképp alakul: .carousel-disabled (alapértelmezett: 'carousel')
• speed: a váltás sebessége (időtartama) milliszekundumban (alapértelmezett: 300)