SimpleCarousel
Robert Yao
Wersja: 0.1.0
Numer wersji wtyczki
Dokumentacja
Sprawdź wszystkie opcje jakie oferuje plugin
Strona wtyczki
Oficjalna witryna wtyczki
Github
Repozytorium Github
Wersja jQuery: jquery >=1.7.1
Wersja jQuery z którą współpracuje plugin
Licencja: MIT
Licencja
Zobacz więcej
SimpleCarousel
| Autor | Robert Yao |
| Wersja: | 0.1.0 |
| Dokumentacja: | Dokumentacja |
| Strona wtyczki: | Strona wtyczki |
| Github: | Github |
| Wersja jQuery: | jquery >=1.7.1 |
| Licencja: | MIT |
| Zgłoś błąd: | Zgłoś błąd |
| Data opublikowania: | 2014-09-06 |
Historia wersji
| Wersja | Data publikacji |
|---|---|
| 0.1.0 | 2014-09-06 |
Wtyczka daje możliwość konfiguracji poszczególnych elementów za pomocą styli css oraz wbudowanych parametrów.
Działa idealnie na wszystkich przeglądarkach. Płynnie dostosowuje się do ekranu urządzeń mobilnych i desktopowych. Zoptymalizowany dla urządzeń z systemem Android i Ios.
Więcej informacji o SimpleCarousel można znaleść na stronie autora pluginu.
Tagi
Instalacja
- Biblioteki
- HTML
- JS
<link href="horizontal-carousel.css" rel="stylesheet" />
<link href="vertical-carousel.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="jquery.easing.1.3.min.js"></script>
<script src="jquery.simplecarousel.min.js"></script><div id="carousel" class="carousel">
<a title="Previous Page" id="carousel-prev-btn" class="carousel-prev-btn" href="#prev">‹</a>
<div id="carousel-container" class="carousel-container">
<ul id="carousel-list" class="carousel-list">
<li>
<p><a href="#"><img width="300" alt="" src="http://jquery.netid.pl/media/sample/300x214/1.jpg"></a></p>
</li>
<li>
<p><a href="#"><img width="300" alt="" src="http://jquery.netid.pl/media/sample/300x214/2.jpg"></a></p>
</li>
<li>
<p><a href="#"><img width="300" alt="" src="http://jquery.netid.pl/media/sample/300x214/3.jpg"></a></p>
</li>
<li>
<p><a href="#"><img width="300" alt="" src="http://jquery.netid.pl/media/sample/300x214/4.jpg"></a></p>
</li>
<li>
<p><a href="#"><img width="300" alt="" src="http://jquery.netid.pl/media/sample/300x214/5.jpg"></a></p>
</li>
<li>
<p><a href="#"><img width="300" alt="" src="http://jquery.netid.pl/media/sample/300x214/6.jpg"></a></p>
</li>
</ul>
</div>
<a title="Next Page" id="carousel-next-btn" class="carousel-next-btn" href="#next">›</a>
</div>$("#carousel-album").simpleCarousel({
container: "#carousel-container",
carousel: "#carousel-list",
item: "li",
prevBtn: "#carousel-prev-btn",
nextBtn: "#carousel-next-btn",
playDirection: "H",
autoPlay: true,
pageSwitchDelay: 3000,
animateDuration: 500,
easing: "swing",
pageDirection: "back",
cyclePlay: false,
buttonAvailable: false,
defaultPage: 0,
itemsPerStep: 0,
beforeSwitch: function(){
},
afterSwitched: function(){
},
paginated: true
});
