W sieci jest wiele dostępnych sliderów. Większość z nich wygląda świetnie i mają wiele funkcji, wszystko ok, jeśli oczekujemy dokładnie takich efektów, ale najczęściej nie mają dokładnie tego czego potrzebujemy. Szukamy slider, który będzie miał podstawowe funkcji i będzie można dostosować go do naszej strony.

Slider jQuery został opracowany najłatwiej jak to tylko możliwe. Tylko niezbędne funkcje zostały zawarte w czystym kodzie. Ustawienia funkcji są w prosty sposób edytowalne, dlatego bez znajomości skomplikowanego kodu JavaScript możesz zdecydować jakie funkcje są Ci niezbędne.

Responsywny slider (RWD Slider)

Potrzebne są 3 pliki do uruchomienia slidera – biblioteka jQuery, plugin skutera i style CSS. Upewnij się, że masz najnowszą wersję biblioteki jQuery na swojej stronie.


<!-- biblioteka jQuery  -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- plugin naszego slidera-->
<script src="bjqs.min.js"></script>

<!-- style css -->
<link type="text/css" rel="Stylesheet" href="bjqs.css" />

Kod HTML

<div id="my-slideshow">
    <ul class="bjqs">
        <li><a href="link gdzie chcesz przeklikać się"><img src="link do zdjecia" alt="tytul zdjecia"></a></li>
        <li><a href="link2 gdzie chcesz przeklikać się"><img src="link2 do zdjecia" alt="tytul 2 zdjecia"></a></li>
      <!-- itd -->
    </ul>
</div>

Uruchomienie responsywnego slidera

Ostatnim krokiem jest dodanie pluginu do głównego pliku strony (html/php). W następującym kodzie ustawisz wymiary głównego okna slidera (height – wysokość okna: wartość w px; width – szerokość okna: wartość w px).

<script>
jQuery(document).ready(function($) {
    $('#banner-fade').bjqs({
        'height' : 320,
        'width' : 620,
        'responsive' : true
    });
});
</script>

Funkcje slidera

Tutaj jest pełna lista wszystkich możliwych parametrów, które możesz skonfigurować i ich wartości.
Parametry dodajemy w apostrofach jak powyżej przy wywoływaniu slidera w sekcji ‘HEAD’.

// szerokosc i wysokosc są wymagane do działania slidera
// jesli ustawiles 'responsive' na true, wartości szerokość i wysokość będą ustawione jako maksymalne wymiary
width : 700,
height : 300,

// animation values
animtype : 'slide', // efekt przejscia 'fade' lub 'slide'
animduration : 450, // 450ms dlugosc przejscia
animspeed : 4000, // szybkosc animacji w milisekundach
automatic : true, // automat

// control and marker configuration
showcontrols : true, // pokaz przyciski lewo, prawo
centercontrols : true, // przyciski na srodku wzgledem wysokosci
nexttext : 'Next', // przycisk tekstowy nastepny
prevtext : 'Prev', // przycisk tekstowy poprzedni
showmarkers : true, // pokaz znaczniki
centermarkers : true, // wycentrowanie znacznikow

// interaction values
keyboardnav : true, // nawigacja strzalkami
hoverpause : true, // pauza po najechaniu kursorem

// presentational options
usecaptions : true, // pokaz opisy 'title' dla obrazków
randomstart : true, // losowy start
responsive : true // responsywnosc

Demo

xHej! Jeśli macie jakieś pytania, problemy, bądź sugestie to piszcie pod tematem

Pobierz paczkę z wszystkimi plikami potrzebnymi do działania slidera.