
Dynamic Carousel
Egyszerű carousel plugin
Verzió: | nincs adat |
Kiadás dátuma: | 2011/11/23 |
Fejlesztő: | Mat Marquis |
Liszensz: | MIT |
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)