Slider – czyli element najczęściej przygotowany za pomocą biblioteki jQuery, to bardzo popularny element na wielu stronach internetowych mający za zadanie sprawnie i efektownie przewijać ciekawą treść lub zdjęcia.

Dzisiaj chciałbym wam przedstawić możliwie najbardziej odchudzoną wersję takiego slidera, bez niepotrzebnych plików i zabiegów do wykonania by go uruchomić. jQuery Slider2 to narzędzie, które składa się z dwóch plików: arkuszu styli i biblioteki. Jak należy uruchomić skrypt?

Todo

By uruchomić skrypt na swojej stronie należy przede wszystkim podłączyć bibliotekę jQuery, gdyż będzie ona niezbędna do prawdiłowego działania skryptu. Bibliotekę można pobrać lub wkleić link w sekcji <head></head> wprost z serwera Google

[js]<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>[/js]

Kolejnym krokiem po pobraniu paczki slidera będzie umieszczenie kodu:

[js]<script type="text/javascript" src="jquery.slider.min.js"></script>
<link href="jquery.slider.css" rel="stylesheet" type="text/css" />[/js]

Następny krok to umieszczenie kodu, który wywoła działanie slidera, kod najlepiej umieścić przed znacznikiem </body>

[js]<script type="text/javascript">
$(’#slider’).slider({
width: 600,
height: 200
});
</script>[/js]

W ostatnim kroku należy umieścić szkielet slidera, posłuży nam do tego kod poniżej. Oczywiście zawartość tagów <q> i <h2> jest do zmiany.

[html]<div id="slider">
<div style="background-image: url(https://wex.im/img/img1.jpg);">
<h2>Styl Simple</h2>
<q>lubik.info – webmaster blog</q>

</div>
<div style="background-image: url(https://wex.im/img/img2.jpg);">
<h2>Styl Light</h2>
<q>lubik.info – webmaster blog</q>

</div>
<div style="background-image: url(https://wex.im/img/img3.jpg);">
<h2>Styl Easy</h2>
<q>lubik.info – webmaster blog</q>

</div>
</div>[/html]

Demo i download

Demo Pobierz

TEMATY:
Najświeższe artykuły