Responsywny slider

Jeśli ktoś kiedyś próbował zrobić stronkę z responsywnym layoutem i zapragnął użyć jakiegoś slidera, prawdopodobnie z zażenowaniem stwierdził, że slider nie działa jak należy po zmianie rozmiaru okienka przeglądarki i przełączeniu się na inną wersję CSS.

Dzieje się tak, ponieważ generalnie rozwiązania JavaScript (np. pluginy jQuery takie jak jQuery Tools Scrollable) odpowiedzialne za wyświetlanie sliderów zazwyczaj pobierają wszystkie potrzebne wymiary elementów HTML podczas inicjalizacji pluginu. Po zmianie szablonu CSS, slider korzysta już z niewłaściwych miar, np. przesuwa obrazki za daleko.

Jeśli plugin, z którego korzystasz ma zabezpieczenie przed taką sytuacją (np. pobiera wszystkie miary na nowo po każdej zmianie rozmiaru okna przeglądarki, co technicznie rzecz biorąc nie jest skomplikowane), możesz sobie odpuścić ten post. Jeśli jednak interesuje Cię, co można zrobić, by „głupszy” plugin poradził sobie z problemem, przedstawiam rozwiązanie, które zastosowałem na stronie z moim portfolio.

Ponieważ plugin, którego użyłem, nie dostosowuje miar elementów HTML po zmianie layoutu, konieczne było pobranie ich na samym początku wykonania skryptu. Postanowiłem zatem zduplikować kod HTML slidera dla każdego z dostępnych layoutów:

$(document).ready(function() {
    var slider = $(".slider").addClass("width960");
    slider.clone()
        .removeClass("width960")
        .addClass("width640")
        .appendTo(".slider-wrapper");
    slider.clone()
        .removeClass("width960")
        .addClass("width320")
        .appendTo(".slider-wrapper");
    $(".slider").scrollable(); // uruchomienie sliderów
});

Powyższy kod dodaje klasę .width960 do slidera, a następnie klonuje go dwukrotnie, zamieniając nową klasę na, odpowiednio, .width640 i .width320. Sklonowane elementy sa doklejane na koniec kontenera, w którym zawarty jest oryginalny slider (tutaj użyłem przykładowej klasy .slider-wrapper).

Kolejnym krokiem jest zdefiniowanie w naszym arkuszu CSS odpowiednich media queries:

.slider {
    display: none;
}
@media screen and (min-width: 960px) {
    .slider.width960 {
        display: block;
    }
}
@media screen and (min-width: 640px) and (max-width: 959px) {
    .slider.width640 {
        display: block;
    }
}
@media screen and (max-width: 639px) {
    .slider.width320 {
        display: block;
    }
}

W ten sposób realnie piszemy kod HTML tylko dla jednego slidera, ale dzięki powyższemu kawałkowi JavaScriptu mamy jego trzy kopie dla trzech różnych layoutów, przełączające się razem z całą resztą layoutu.


Napisz komentarz


Szukaj wpisów


Chmura tagów