Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem
WebHelp.pl Blog 20 skryptów do tworzenia efektownych sliderów

Blog

20 skryptów do tworzenia efektownych sliderów

Bartosz Romanowski 23 lipca 2012 komentarze ()

Tagi:JavaScript jQuery skrypty slider

SlideJSSlidery to popularny i efektowny sposób na prezentację wielu zdjęć lub innego rodzaju zawartości w widocznym miejscu strony. Atrakcyjny sposób prezentacji jest tutaj szczególnie ważny, ponieważ slider musi przyciągnąć uwagę osoby odwiedzającej naszą stronę. W tym wpisie zaprezentuję 20 skryptów, które umożliwią nam stworzenie takiego elementu.

Zobacz także: Layer Sliders - najlepsze slidery wielowarstwowe

Nivo Slider

Nivo Slider

Nivo Slider to jeden z najpopularniejszych sliderów. Jest bardzo łatwy w implementacji, a jednocześnie ma wystarczające do większości zastosowań możliwości. Nie jest to jednak skrypt, który szokuje ilością dostępnych opcji czy nadzwyczajnymi efektami (dostępnych jest zaledwie 16 efektów przejść pomiędzy obrazami).

Nivo Slider obsługuje linkowanie z obrazów, pozwala na zastosowanie jednego z dwóch typów nawigacji, pozwala na utworzenie nawigacji z miniaturkami, obsługuje tytuły z kodem HTML (można je swobodnie modyfikować za pomocą CSS), a w pakiecie znajdują się trzy gotowe do użycia style graficzne. Od wersji 3.0 slider jest responsywny (tu można zobaczyć demonstrację), ale nie działa to tak jak powinno.

Nivo Slider jest dość mały - wersja spakowana ma jedynie 12 kB. Skrypt jest darmowy (licencja MIT), dostępny jest również płatna wtyczka dla WordPressa w cenie 19 dolarów za jedną domenę lub 99 dolarów bez ograniczenia ilości domen.

Cena: darmowy / $19 / $99
Licencja: MIT

Linki: oficjalna strona | demo | do pobrania

Flexslider

Flexslider

Przejęty jakiś czas temu przez WooThemes skrypt Flexslider staje się coraz bardziej popularnym sliderem. Jest w pełni responsywny, obsługuje slajdy z osadzonymi filmami (w ograniczonym zakresie, ale jednak) i działa bardzo stabilnie. Pozwala na ustawienie pionowych lub poziomych przejść pomiędzy slajdami, a na dodatek wspiera wtyczkę Easing, dzięki czemu efektów przejścia jest cała masa.

Flexslider pozwala na definiowanie slajdów w formie kodu HTML, dzięki czemu nie jesteśmy ograniczeni do samych tylko obrazków. Posiada również wsparcie dla ekranów dotykowych w urządzeniach mobilnych.

Cena: darmowy
Licencja: MIT

Linki: oficjalna strona | demo | do pobrania

AnythingSlider

Anything Slider

Mimo że demonstracyjna wersja tego slidera nie prezentuje się zbyt okazale, to skryptowi temu z pewnością należy się uważnie przyjrzeć. Przede wszystkim slajdy mogą zawierać (zgodnie z nazwą skryptu) po prostu wszystko: obrazy, kod HTML i filmy (zarówno te umieszczone na YouTube czy Vimeo, jak i przechowywane na naszym serwerze i odtwarzane przy użyciu jednego z dostępnych odtwarzaczy).

AnythingSlider posiada bardzo duże możliwości konfiguracji i dostosowania do naszych wymagań. Dodatkowo możemy skorzystać z rozszerzeń poprawiających współpracę z filmami osadzonymi w slajdach oraz dodającymi nowe efekty wizualne. Dostępna jest również darmowa wtyczka dla WordPressa

Cena: darmowy
Licencja: GPL 3

Linki: oficjalna strona | demo | do pobrania

Orbit

Orbit

Orbit to jeden z ciekawszych i zdecydowanie niedocenianych sliderów. Posiada wszystko, co od tego typu skryptu można wymagać i jest responsywny. To, co wyróżnia ten slider pośród innych, to elastyczność w rozmieszczaniu elementów sterujących oraz ciekawy element odliczający czas do kolejnego slajdu (w prawym górnym rogu).

Na duży plus można zaliczyć rozmiar skryptu - w podstawowej skompresowanej wesji ma on niewiele ponad 4 kB.

Cena: darmowy
Licencja: MIT

Linki: oficjalna strona | demo | do pobrania

Cu3er

Cu3er

Cu3er jest sliderem trudnym do zaprezentowania na statycznym zrzucie ekranu - jego główną zaletą są bowiem szalenie efektowne transformacje 3D. Jest to skrypt komercyjny, ale z całą pewnością warty swojej ceny, bo jego możliwości są olbrzymie. Slider jest zbudowany w oparciu o technologię Flash, ale może działać również w oparciu o JavaScript (tylko na przeglądarkach, które to umożliwiają).

Poza sporą ilością transformacji dwu- i trójwymiarowych do dyspozycji otrzymujemy rozszerzenia dla WordPressa i Joomli, narzędzie do tworzenia i upiększania naszych dzieł oraz rozbudowane API. Dostępnych jest również wiele gotowych szablonów sliderów.

Cu3er dostępny jest również w darmowej wersji, ale jest ona mocno ograniczona i wyświetla logo na każdym ze slajdów.

Cena: $49 / $145
Licencja: komercyjna

Linki: oficjalna strona | demo | do pobrania

Coin Slider

Coin Slider

Estetyczny, prosty i lekki (8 kB) slider, wyróżniający się ciekawymi, aczkolwiek niezbyt licznym, efektami przejść pomiędzy obrazami. Działa bez problemów na urządzeniach mobilnych, a jego wygląd łatwo dostosować do własnych potrzeb za pomocą CSS.

Cena: darmowy
Licencja: MIT

Linki: oficjalna strona | demo | do pobrania

Slicebox

Slicebox

Prosty slider z bardzo efektownymi transformacjami 3D, wykonanymi przy użyciu tylko i wyłącznie CSS3. Działa tylko w przeglądarkach, które obsługują transformacje 3D.

Cena: darmowy
Licencja: MIT

Linki: oficjalna strona | demo | do pobrania

Supersized

Supersized

Supersized to pełnoekranowy (wyświetlający slajdy w tle strony) slider, idealny do prezentacji dobrej jakości zdjęć. Posiada możliwość stworzenia nawigacji opartej na miniaturach. Obsługuje linkowanie do konkretnych slajdów, skalowanie obrazów z zachowaniem odpowiednich proporcji, ładowanie zdjęć w tle oraz nawigację za pomocą klawiatury. Pozwala również na wyświetlanie zdjęć bezpośrednio z serwisu Flickr.

Cena: darmowy
Licencja: MIT/GPL

Linki: oficjalna strona | demo | do pobrania

Galleria

Galleria

Galleria to nie tylko slajder - to skrypt pozwalający na stworzenie efektownej galerii zdjęć. Posiada duże możliwości konfiguracji oraz dostosowania wyglądu do własnych potrzeb. Umożliwia zbudowanie nawigacji w formie miniatur, zarówno wyświetlanej na stałe, jak i otwieranej przyciskiem. Dostępne są również rozszerzenia do obsługi serwisów Flickr i Picasa.

Sam skrypt jest darmowy, natomiast twórcy zarabiają na dodatkowych szablonach - tylko jeden (Classis) jest dostępny za darmo, pozostałe (w tym pełnoekranowy) kosztują od 9 do 29 dolarów.

Cena: darmowy, płatne dodatki
Licencja: GPL 3

Linki: oficjalna strona | demo | do pobrania

WOW Slider

WOW Slider

WOW Slider to jeden ze starszych, ale wciąż rozwijanych sliderów. Pozwala na dostosowanie wyglądu do własnych potrzeb, jest responsywny, wspiera ekrany dotykowe oraz posiada wszystkie niezbędne elementy (nawigacja, opisy) i opcje. Jednak to, co wyróżnia ten skrypt, to specjalny program (dla systemów Windows i Mac OS X), dzięki któremu nawet kompletny laik stworzy własny slider bez konieczności pisania chociażby jednej linii kodu.

Kolejną zaletą WOW Slidera jest bogata biblioteka szablonów slajdów oraz dobrze wyglądające i unikalne transformacje. Dostępne są również rozszerzenia dla WordPressa i Joomli.

Cena: darmowy (dla witryn non-profit), $69 / $99
Licencja: komercyjna

Linki: oficjalna strona | demo | do pobrania

SlidesJS

SlideJS

Lekki i szybki slider, wykorzystujący plugin Easing do transformacji slajdów. Posiada wbudowany preloader obrazów oraz możliwość stworzenia nawigacji opartej na umieszczonych w oddzielnym miejscu miniaturach (przykład wykorzystania do prezentacji zdjęć produktu w sklepie internetowym).

Cena: darmowy
Licencja: Apache

Linki: oficjalna strona | demo | do pobrania

Fullscreen background image slideshow with CSS3

CSS3 Fullscreen Background Slideshow

To właściwie nie jest gotowy do użycia produkt, a tutorial pokazujący jak wykorzystując CSS3 można zrobić efektowny slider pełnoekranowy z ciekawymi efektami wizualnymi. Rzecz warta obejrzenia. Trzeba pamiętać, że skrypt działa tylko w przeglądarkach, które obsługują animacje CSS.

Cena: darmowy
Licencja: MIT

Linki: oficjalna strona | demo | do pobrania

SimpleSli.de

SimpleSlide

Prosty do bólu slider, który jako slajdy wykorzystuje dowolny kod HTML. Jednak jego prostota wcale nie oznacza bezużyteczności - wręcz przeciwnie, jestem przekonany, że może on znaleźć wiele zastosowań. Na dodatek jest bardzo lekki (6 kB).

Cena: darmowy
Licencja:

Linki: oficjalna strona | demo | do pobrania

SlideDeck

SlideDeck

SlideDeck to jeden z najbardziej zaawansowanych i efektownych sliderów. To prawdziwy kombajn, który potrafi istne cuda - aby uświadomić sobie jakie trzeba obejrzeć przykłady zastosowania tego skryptu. Mnie osobiście najbardziej podoba się “slider w slajdzie”, który można zobaczyć na stronie głównej projektu (slajd drugi).

Stworzona przez twórców skryptu wtyczka dla WordPressa jest prawdziwym kombajnem. Potrafi tworzyć slajdy na podstawie danych z różnych źródeł, takich jak Flickr, Picassa, Instagram, YouTube, Twitter, Dribble, Google+, kanały RSS i wiele, wiele innych. Pozwala na budowanie własnych szablonów i korzystanie z dostarczonych przez twórców wtyczki. Posiada zestaw filtrów, dzięki którym w locie zmienimy wygląd naszych zdjęć. Obsługuje oczywiście slajdy z kodem HTML, a do tego posiada rozbudowany i intuicyjny panel administracyjny. Jeśli potrzebujemy tego typu rozwiązania, to zakup SlideDeck na pewno nie będzie wyrzuceniem pieniędzy w błoto.

SlideDeck nie jest niestety produktem tanim. Zarówno wtyczka do jQuery, jak i rozszerzenie dla WordPressa, kosztują od 49 dolarów za licencję dla jednej strony do 199 dolarów za licencję na nieograniczoną liczbę stron.

Cena: $49 - $199
Licencja: komercyjna

Linki: oficjalna strona | demo | do pobrania

Camera

Camera

Bardzo efektowny reponsywny slider, świetnie nadający się do prezentacji fotografii. Posiada nawigację z miniaturkami wyświetlanymi po najechaniu kursorem myszy (oferuje również standardowe, widoczne przez cały czas miniatury) oraz opcjonalny tryb pełnoekranowy. Do tego łatwo można zmodyfikować jego domyślny wygląd, a ilość dostępnych opcji może przyprawić o zawrót głowy. To naprawdę kawał dobrego skryptu i zdecydowanie warto się z tym skryptem zapoznać.

Cena: darmowy
Licencja: Apache 2.0

Linki: oficjalna strona | demo | do pobrania

bxSlider

bxSlider

Z pozoru prosty slider, pozwalający na wyświetlanie slajdów zbudowanych przy użyciu kodu HTML. Jednak mnogość dostępnych opcji pozwala na skonfigurowanie w sposób niedostępny w innych tego typu skryptach (za przykład niech posłuży tryb tickera).

Aby zorientować się co potrafi bxSlider najlepiej przyjrzeć się przykładom wykorzystania.

Cena: darmowy
Licencja: MIT

Linki: oficjalna strona | demo | do pobrania

Sequence

Sequence

Bardzo, ale to bardzo efektowny skrypt, pozwalający na tworzenie slajdów z animowanymi sekwencjami. Niestety, jest również dość trudny w konfiguracji - stworzenie kompletnego slidera zajmie nam z pewnością nieco czasu. Ostateczny efekt jest jednak tego warty - wystarczy zerknąć na dostępne na stronie prezentacje.

Cena: darmowy
Licencja: MIT / GPL

Linki: oficjalna strona | demo | do pobrania

Slidorion

Slidorion

Skrypt idealny do stworzenia slidera prezentującego na przykład wybrane wpisy na blogu. Prosty w implementacji, lekki i łatwy w modyfikacji.

Cena: darmowy
Licencja: Apache 2.0

Linki: oficjalna strona | demo | do pobrania

Skitter

Skitter

Skitter to slider posiadający funkcje znane z innych tego typu skryptów. Zwraca jednak uwagę bardzo efektownymi transformacjami slajdów oraz ciekawie rozwiązanymi miniaturkami w nawigacji. Dostępna jest również wtyczka dla WordPressa.

Cena: darmowy
Licencja: MIT / GPL 2

Linki: oficjalna strona | demo | do pobrania

Awkward Showcase

Awkward Showcase

Jeden z ciekawszych sliderów, posiadający kilka trybów wyświetlania (zwykły slider, slider z miniaturami ułożonymi pionowo lub poziomo, slider na pełną szerokość okna i slider z połączonymi w jeden ciąg slajdami). Slajdy mogą zawierać obrazy lub kod HTML, można do nich również dodawać znaczniki, które po najechaniu kursorem myszy otwierają małe okna z dodatkową treścią.

Cena: darmowy
Licencja: Creative Commons Attribution-ShareAlike 3.0 Unported

Linki: oficjalna strona | demo | do pobrania

Warto również przejrzeć skrypty dostępne w serwisie CodeCanyon, gdzie w przystępnej cenie można znaleźć naprawdę ciekawe rozwiązania.

Bartosz Romanowski

Programista, gadżeciarz, krytyczny miłośnik produktów Apple, fan ciężkich brzmień i niepoprawny pesymista.


Zobacz także

Komentarze

Tematy


Popularne wpisy

Autorzy bloga



HTML CSS JavaScript PHP bazy danych MySQL Flash grafika framework hosting domeny pozycjonowanie wordpress Facebook