jQuery slider - animeSlider

2011-10-28, 17:08
Prosty sposób na utworzenie szybkiej strony www

AnimeSlider to uniwersalny 'slider' który uruchomi prezentacje bloków tekstowych i grafiki. Jest użyteczny do prezentacji reklamowych, tekstów oraz stron internetowych wczytywanych z linków ajaxowych. Całość skryptu to zaledwie 2.5KiB. AnimeSlider do uruchomienia wymaga pliku jQuery


Skrypt posiada kilka trybów pracy:
  1. losowe wyświetlenie bloków.
  2. kolejne wyświetlenie bloków.
  3. wybranie jednego z trzech dostępnych efektów animacji.
  4. losowy tryb efektów animacji.

Slider można wywołać z parametrami:
  • duration: 6000, - czas przejścia pomiędzy blokami (6000 to czas 6 sekund)
  • selector: 'li', - tag,id lub nazwa klasy służąca do rozpoznania bloków
  • speed: 'slow', - szybkość animacji (slow,normal,fast)
  • random: false, - włączenie/wyłączenie trybu losowania bloków (true/false)
  • effect: 'slide', - typ animacji (fade,slide,normal,random)
  • bar: false, - włączenie/wyłączenie pokazywania numeru bloków (true/false)
  • navigation: true, - włączenie/wyłączenie pokazywania nawigacji poprzedni/następny blok (true/false)
  • autoplay: true, - włączenie/wyłączenie automatycznego wczytywania slajdów (true/false)
  • ajax: false, - domyślne wczytanie linków przez ajax (true/false)


Przykłady zastosowania użycia jQuery animeSlider

Pliki do ściągnięcia dla animeSlider wersja 1.0:
pełna wersja jquery.anime.slider.js - 5.1KiB
wersja spakowana jquery.anime.slider.pack.js - 2.4KiB
style css - 949B

Demo 1
Typowy przykład slidera z obrazkami. Włączone 3 różne losowe efekty animacji oraz losowe wybieranie slajdów. Automatyczne pokazywanie slajdów jest włączone.

<ul id="sliderText" class="animeSlider">
<li><img src="/images/slider_1.jpg" /></li>
<li><img src="/images/slider_2.jpg" /></li>
<li><img src="/images/slider_3.jpg" /></li>
</ul>
<script type="text/javascript">
$('#sliderText').animeSlider({
duration: 5555,
bar: false,
random: true,
effect: 'random'
});
</script>




Demo 2
Prezentacja bloków tekstowych. Gdy podamy atrybut title to zamiast numeru w nawigacji pojawi się tytuł slajdu. Automatyczne pokazywanie slajdów jest wyłączone.

<div id="sliderText" class="animeSlider">
<p title="strona 1">Lorem ipsum text 1 ...</p>
<p title="strona 2">Lorem ipsum text 2 ...</p>
<p>Lorem ipsum text 3 ...</p>
<p>Lorem ipsum text 4 ...</p>
<p>Lorem ipsum text 5 ...</p>
</div>
<script type="text/javascript">
$('#sliderText').animeSlider({
selector: 'p',
navigation: false,
autoplay: false,
effect: 'slide'
});
</script>

Lorem ipsum text 1. Dolor sit amet, consectetur adipiscing elit. Nam fringilla luctus ipsum. Sed feugiat, lacus eu malesuada convallis, lorem lectus fermentum felis, quis tincidunt erat metus eget quam. In hac habitasse platea dictumst. Vestibulum volutpat sodales nisi, at porta magna blandit id. Vestibulum euismod, mi in fermentum sollicitudin, est nisl convallis mauris, sed tincidunt urna risus in nulla. Nunc commodo, eros eget sollicitudin vestibulum, orci lectus tristique metus, eu sollicitudin est nunc non orci. Donec malesuada eros nec ipsum feugiat sed venenatis lectus ultrices.

Lorem ipsum text 2. Nulla cursus aliquam ornare. Pellentesque auctor pretium vehicula. Vivamus nulla urna, vestibulum at vehicula non, sodales eget nulla. Cras sollicitudin dictum velit vel ullamcorper. Sed lectus odio, semper at commodo a, vulputate nec tortor. Nulla consequat justo sed dui faucibus porttitor. Vivamus lacinia eleifend felis, eu pellentesque lorem faucibus eget. Suspendisse ac rutrum ipsum. Suspendisse vehicula consectetur felis, eu vehicula turpis consequat vitae. Quisque quis adipiscing urna. Suspendisse potenti. Donec eget purus interdum risus aliquet posuere sit amet sit amet enim. Quisque a turpis sem. Nunc tortor ligula, accumsan eu pellentesque a, ultricies non sem.

Lorem ipsum text 3. Quisque est dolor, lacinia at vehicula euismod, venenatis id magna. Pellentesque in lacus ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas aliquet libero sed ante convallis iaculis. Nulla facilisi. Vivamus ut quam libero. Maecenas fringilla nulla id nunc tempor eu tincidunt dui laoreet. Curabitur ut massa ligula, sit amet iaculis ligula. Nam pharetra commodo metus et lobortis. Donec dapibus condimentum faucibus. Fusce arcu erat, convallis non fringilla ac, sollicitudin placerat metus. Quisque elementum, nisl ut consectetur porttitor, quam nibh ornare tortor, sed euismod massa sem a sapien. Nunc posuere lobortis tortor non vestibulum. Etiam urna augue, adipiscing faucibus sagittis sit amet, porttitor eu elit. Sed eu risus mi.

Lorem ipsum text 4. Nam quis est magna. Maecenas laoreet quam et magna ultricies in blandit augue viverra. Ut lacus enim, feugiat id rhoncus et, accumsan non velit. Proin lobortis dui pretium ligula convallis sed semper nisl dapibus. Ut ullamcorper semper nisi, in luctus velit scelerisque id. Nunc fringilla tempus vehicula. Suspendisse quis nunc lorem. Donec feugiat tortor ac purus aliquam venenatis. Phasellus mollis, enim et suscipit vestibulum, felis elit laoreet nulla, id molestie justo ligula vel elit.

Lorem ipsum text 5. Maecenas sapien nisl, pellentesque volutpat scelerisque quis, dictum vel sapien. Mauris placerat euismod egestas. Aliquam facilisis, ipsum mollis dignissim fermentum, odio ligula viverra lorem, non rutrum eros felis non nisi. Vestibulum dapibus tincidunt velit ut pretium. Mauris a arcu eros, et suscipit elit. Nullam malesuada dapibus odio, eu posuere nisi consequat aliquet. Donec id est nunc, ultricies elementum tortor. Vestibulum eget quam eu urna gravida faucibus. Vestibulum sit amet augue ut nisi lacinia accumsan vitae in felis. Integer ut dui ut tortor cursus elementum. Pellentesque vitae magna nibh, sit amet placerat nunc. Praesent congue nulla vitae ante lobortis in euismod risus euismod. Mauris ipsum nulla, convallis in euismod rhoncus, ullamcorper vitae mi. Duis sit amet.




Demo 3
Autmatyczne pokazywanie slajdów jest wyłączone a strony wczytują się ajaxem po klliknięciu na nazwę strony w pasku nawigacji. Wystarczy przygotować i wkleić kilka linków a otrzymujemy widget do ajaxowego wczytywania stron z nawigacją.

<div id="sliderAjax" class="animeSlider">
<a href="/pub/animeSlider/test1.html">test 1</a>
<a href="/pub/animeSlider/test2.html">test 2</a>
<a href="/pub/animeSlider/test3.html">test 3</a>
</div>
<script type="text/javascript">
$('#sliderAjax').animeSlider({
ajax: true,
navigation: false,
autoplay: false,
effect: 'fade'
});
</script>




animeSlider jest darmowy na licencji MIT.
Komentarze (0), Dodaj komentarz