Responsywny suwak treści CSS. Responsywny suwak CSS3

W tym samouczku stworzymy prostą responsywną stronę z nagłówkiem ozdobionym karuzelą, w której obrazy przesuwają się od prawej do lewej. Nasze rozwiązanie nie korzysta z JavaScriptu, pokaz slajdów oparty jest o animacje CSS3, które są obsługiwane w większości nowoczesnych przeglądarek: Firefox 15+, Chrome 22+, Safari 5.1+, Opera 12.1+ oraz IE10.

Krok 1 - Przygotowawczy

Będziemy potrzebować 4 dużych obrazów (w naszym przykładzie rozmiar to 1200px x 390px). W przypadku suwaka poziomego przygotujemy obraz 4800px x 390px w Photoshopie, umieścimy wszystkie nasze obrazy poziomo jeden po drugim i zapiszemy wynik w formacie przyjaznym dla Internetu („ suwak-poziomy.jpg”).

Krok 2 — HTML

Właściwie będziemy animować właściwość background-position dla naszego tytułu. Sam nagłówek ma bardzo prosty znacznik:

L „ile de Batz

Cały kod strony wygląda tak:

L „ile de Batz

Krok 3. CSS dla urządzeń mobilnych

Zaczniemy definiować style na urządzenia mobilne. Ustawmy podstawę projektu, a następnie dodajmy rozszerzenia szablonów dla dużych ekranów. W tekście lekcji podane są tylko podstawowe właściwości, pełny kod można obejrzeć w źródle:

Treść (szerokość: 90%; min-width: 300px; max-width: 1200px; margin: 0 auto; padding-top: 1em; color: # 504331) header (text-align: center; position: relative;) h1 ( font-size: 2,75em; background: white; display: inline-block; padding: 0 10px; margin-bottom: .25em;) h1: after (content: ""; height: 2px; display: block; position: bezwzględne ; left: 0; right: 0; top: .5em; z-index: -1; border-top: 1px solid # 504331; border-bottom: 1px solid # 504331;) .links (tło: url (../ images / map.png) dolny środek bez powtórzeń; padding-bottom: 177px;)

Krok 4. Style dla dużych ekranów

Na dużych ekranach sekcje .Główny oraz .ekran powinny być wyświetlane inaczej. Sekcja .połączyć będzie miał szerokość 300 pikseli i będzie ustawiony jako prawy pasek boczny i sekcja .Główny pozostanie po lewej stronie. Dodamy również podwójną linię, aby oddzielić sekcje. Użyjemy zapytania @media, aby określić szerokość ekranu większą niż 1024px:

@media only screen i (min-width: 1024px) (.content (pozycja: względna;) .main (margin-right: 320px; padding: .5em 20px .5em 0; / * dodaj podwójną linię * / border-right : 1px solid # 504331; box-shadow: 2px 0 white, 3px 0 # 504331;) .links (pozycja: bezwzględna; prawo: 0; góra: 0; szerokość: 300px; text-align: prawo;))

Krok 5: responsywne obrazy nagłówka

Zacznijmy pracę nad główną częścią naszego samouczka: responsywnym suwakiem CSS w nagłówku. Najpierw zróbmy responsywny obraz tła.

Nagłówek (tło: url (../ images / slider-horizontal.jpg) 0 bottom repeat-x; background-size: 400%; padding-bottom: 32,5%;)

Przy użyciu dwóch wartości wyrażonych w procentach (400% dla nieruchomości) rozmiar tła i 32,5% dla dolnego wypełnienia) tło tytułu będzie wyświetlane poprawnie niezależnie od rozmiaru ekranu.

Dlaczego 400%? Mamy 4 slajdy, więc wyświetli 1/4 obrazu tła w nagłówku. Oznacza to, że rozmiar tła powinien być 4 razy większy niż tytuł.

Dlaczego 32,5%? Umieszczamy nasze tło w dolnej części nagłówka. Wysokość obrazu tła to 390px, szerokość pojedynczego slajdu to 1200px, 390/1200 = 0,325, czyli wysokość to 32,5% szerokości.

Krok 6. Animacja

Ożywimy nieruchomość pozycja w tle... Aby wyświetlić drugą właściwość obrazu pozycja w tle powinno mieć znaczenie 33,33333% na dole, trzeci - 66,66667% dołu a czwartym jest 100% dół... Pierwszy obraz jest wyświetlany z wartością właściwości pozycja w tle równy 0 na dole lub 133,33333% na dole(ustawiamy powtórki na powtórz-x).

Każdy obraz ma 25% czasu „chwały”. Pierwszy jest wyświetlany od 0 do 25%, drugi od 25% do 50%, trzeci od 50% do 75%, a ostatni od 75% do 100%. Ustawiamy przejścia tak, aby obraz zaczął się wysuwać nieco wcześniej (przy użyciu wartości 5%), zanim upłynie 25% jego czasu wyjściowego. Tak to wygląda @klatki kluczowe:

@keyframes h_slide (0% (pozycja w tle: 0% na dole;) 20% (pozycja w tle: 0% na dole;) 25% (pozycja w tle: 33,33333% na dole;) 45% (pozycja w tle: 33,33333% na dole;) ;) 50% (pozycja w tle: 66,66667% dół;) 70% (pozycja w tle: 66,66667% dół;) 75% (pozycja w tle: 100% dół;) 95% (pozycja w tle: 100% dół;) 100% (pozycja w tle: 133,33% dół;))

Pamiętaj, że musisz dodać prefiksy przeglądarki: @ -webkit-keyframes (dla Chrome, Safari, iOS Safari, Android) i @ -moz-keyframes (dla Firefox 15).

Poniżej znajduje się pełny kod nagłówka. Nasza animacja „h_slide” powtarza się co 24 sekundy (6 sekund na każdy slajd) w nieskończonej pętli. Funkcja czasu ma znaczenie wyluzować aby każdy slajd zwalniał pod koniec przejścia.

Header (text-align: center; position: relative; background: URL (../ images / slider-horizontal.jpg) 0 bottom repeat-x; background-size: 400%; padding-bottom: 32,5%; -webkit- animacja: nieskończone tempo zwalniania h_slide 24s; -moz-animation: nieskończone tempo zwalniania h_slide 24s; animacja: nieskończone tempo zwalniania h_slide 24s;)

Obecnie suwak – karuzela – funkcjonalność, którą po prostu trzeba mieć na stronie internetowej dla firmy, strona internetowa – portfolio lub jakikolwiek inny zasób. Wraz z pełnoekranowymi suwakami obrazu, poziome suwaki karuzeli dobrze pasują do każdego projektu internetowego.

Czasami suwak powinien zajmować jedną trzecią strony witryny. Tutaj suwak karuzeli jest używany z efektami przejścia i responsywnymi układami. Witryny handlu elektronicznego używają suwaka karuzeli do wyświetlania wielu zdjęć w poszczególnych postach lub na stronach. Kod suwaka można dowolnie wykorzystywać i zmieniać w zależności od potrzeb.

Za pomocą JQuery razem z HTML5 oraz CSS3, możesz uatrakcyjnić swoje strony, zapewniając im unikalne efekty i przykuwając uwagę odwiedzających do określonego obszaru witryny.

Slick - nowoczesna wtyczka slidera - karuzela

Przysiek To darmowa wtyczka jquery, której programiści twierdzą, że ich rozwiązanie spełni wszystkie wymagania dotyczące suwaków. Adaptacyjny suwak - karuzela może pracować w " płytki„Dla urządzeń mobilnych, a w” przeciągnij i upuść„W wersji na komputery.

Zawiera efekt przejścia " rozkład", Ciekawa okazja" tryb centrum», Lazy ładowanie obrazów z automatycznym przewijaniem. Zaktualizowana funkcjonalność obejmuje dodawanie slajdów i filtru slajdów. Wszystko po to, abyś mógł dostosować wtyczkę do swoich wymagań.

Owl Carousel 2.0 - jQuery - wtyczka przyjazna dotykowi

Ta wtyczka ma szeroki zakres funkcji w swoim arsenale, odpowiedni zarówno dla początkujących, jak i doświadczonych programistów. To jest zaktualizowana wersja suwaka karuzeli. Jego poprzednik został nazwany dokładnie tak samo.

Suwak zawiera kilka wbudowanych wtyczek poprawiających ogólną funkcjonalność. Animacja, odtwarzanie wideo, autoodtwarzanie suwaka, leniwe ładowanie, automatyczna regulacja wysokości to główne cechy.

Możliwości wsparcia przeciągnij i upuść zawarte w celu wygodniejszego korzystania z wtyczki na urządzeniach mobilnych.
Wtyczka doskonale nadaje się do wyświetlania dużych obrazów nawet na małych ekranach urządzeń mobilnych.

Dość mała, ale bogata w funkcjonalność wtyczka jquery pozwalająca na umieszczenie na stronie slidera - karuzeli, która ma mały rdzeń i nie zużywa dużo zasobów serwisu. Wtyczka może służyć do wyświetlania pionowych i poziomych suwaków, animacji oraz tworzenia zestawów obrazów z galerii.

AnoSlide - Ultra kompaktowy responsywny suwak jQuery

Ultra kompaktowy suwak jQuery- karuzela, której funkcjonalność znacznie przewyższa funkcjonalność zwykłego slidera. Zawiera podgląd pojedynczego obrazu, wieloobrazową karuzelę i suwak oparty na tytule.

Sowa Karuzela - Jquery Slider - Karuzela

- slider z obsługą ekranów dotykowych i technologii przeciągnij i upuśćłatwo zintegrować z HTML- kod. Wtyczka to jeden z najlepszych sliderów, który pozwala tworzyć piękne karuzele bez specjalnie przygotowanych znaczników.

Galeria 3D - karuzela

Zastosowania 3D- przejścia na podstawie CSS- style i trochę JavaScript kod.

Świetna karuzela 3D. Wygląda na to, że wciąż jest to wersja beta, ponieważ w tej chwili odkryłem z nią kilka problemów. Jeśli jesteś zainteresowany testowaniem i tworzeniem własnych sliderów, ta karuzela będzie bardzo pomocna.

Karuzela za pomocą bootstrapu

Responsive Slider — karuzela wykorzystująca technologię w sam raz dla Twojej nowej witryny.

Oparte na Bootstrap - frameworku suwaka karuzeli Moving Box

Najczęściej wyszukiwane w witrynach portfolio i firm. Ten rodzaj suwaka karuzeli jest często spotykany w dowolnym typie witryny.

Ten mały suwak jest gotowy do pracy na urządzeniach o dowolnej rozdzielczości ekranu. Suwak może pracować zarówno w trybie kołowym, jak i karuzelowym. Małe kółko prezentowane jako alternatywa dla innych sliderów tego typu. Jest wbudowana obsługa systemów operacyjnych iOS oraz Android.

W trybie kołowym suwak wygląda całkiem interesująco. Obsługa metody jest doskonale zaimplementowana przeciągnij i upuść oraz automatyczny system przewijania slajdów.

Potężny, responsywny suwak typu karuzela jest idealny do nowoczesnej strony internetowej. Działa poprawnie na każdym urządzeniu. Ma tryby poziomy i pionowy. Jego rozmiar jest zminimalizowany do zaledwie 1 KB. Niezwykle kompaktowa wtyczka ma również doskonałe płynne przejścia.

Wow - suwak - karuzela

Zawiera ponad 50 efektów, które pomogą Ci stworzyć oryginalny slider dla Twojej witryny.

Zmień rozmiar okna przeglądarki, aby zobaczyć, jak dostosowuje się suwak. Bxslider zawiera ponad 50 opcji dostosowywania i prezentuje swoje funkcje z różnymi efektami przejścia.

jKaruzela - jQuery wtyczka, która pomoże uporządkować przeglądanie twoich obrazów. Możesz łatwo tworzyć niestandardowe karuzele obrazów z podstawy pokazanej w przykładzie. Suwak jest responsywny i zoptymalizowany do pracy na platformach mobilnych.

Scrollbox - wtyczka jQuery

Przewijanie kompaktowa wtyczka do tworzenia slidera - karuzeli lub linii przewijania tekstu. Kluczowe funkcje obejmują przewijanie w pionie i poziomie z pauzą po najechaniu myszą.

Prosty suwak - karuzela. Jeśli potrzebujesz szybkiej wtyczki, ta zrobi 100%. Pochodzi tylko z podstawowymi funkcjami wymaganymi do działania suwaka.

Flexisel: responsywna wtyczka suwaka JQuery — karuzela

Twórcy zainspirowali się starą szkołą wtyczki, tworząc jej kopię skupioną na prawidłowym działaniu slidera na urządzeniach mobilnych i tabletach.

Układ responsywny podczas pracy na urządzeniach mobilnych różni się od układu zorientowanego na rozmiar okna przeglądarki. doskonale przystosowany do pracy na ekranach zarówno o niskiej jak i wysokiej rozdzielczości.

Elastislide - responsywny suwak - karuzela

Idealnie dopasowuje się do wielkości ekranu urządzenia. Możesz ustawić minimalną liczbę obrazów do wyświetlenia w określonej rozdzielczości. Działa dobrze jako suwak karuzeli galerii obrazów, używając stałej otoki w połączeniu z efektem przewijania w pionie.

Swobodnie redystrybucyjny suwak z Woothemes... Jest uważany za jeden z najlepiej responsywnych sliderów. Wtyczka zawiera kilka szablonów i przyda się zarówno początkującym użytkownikom, jak i ekspertom.

Niesamowita karuzela

Niesamowita karuzela- responsywny suwak obrazu włączony jQuery... Obsługuje wiele systemów zarządzania witryną, takich jak WordPress, Drupal oraz Joomla... Obsługuje również Android oraz iOS i komputerowe wersje systemów operacyjnych bez żadnych problemów ze zgodnością. Wbudowane niesamowite szablony karuzeli umożliwiają korzystanie z suwaka w trybie pionowym, poziomym i kołowym.

4 listopada 2019 r. Wpis został zaktualizowany

Jurij Nemets

Czyste suwaki CSS + suwak bonusowy

Suwaki CSS mają pewną przewagę nad suwakami JavaScript. Jedną z takich zalet jest prędkość pobierania. Nie tylko obrazy do sliderów są używane w dużych rozmiarach (jeśli nie ma optymalizacji dla różnych ekranów), ale także poświęca się trochę czasu na ładowanie skryptów. Ale w artykule zobaczysz tylko czyste suwaki CSS.

Oto, co znalazłem na stronie o suwakach:

1. Suwak obrazu CSS3

Suwak CSS, który używa przycisków radiowych do poruszania się po slajdach. Te przyciski radiowe znajdują się pod suwakami. Oprócz przycisków radiowych nawigacja odbywa się za pomocą strzałek po lewej i prawej stronie. Aby śledzić, który obraz jest aktualnie wyświetlany, używane są: zaznaczone pseudoklasy.

2. Suwak miniatur CSS3

W przeciwieństwie do poprzedniego suwaka CSS, tutaj zamiast przycisków opcji znajdują się miniatury wszystkich obrazów na dole, co jest przydatne również podczas tworzenia galerii obrazów. Obrazy zmieniają się z dziwnym efektem: płynnie znikają po powiększeniu.

3. Galeria CSS

Ale ten suwak CSS jest idealny do stron sprzedażowych. Z reguły wielu programistów tworzących strony docelowe (sprzedające strony) umieszcza suwak na samym początku, aby na pierwszym ekranie (bez przewijania) odwiedzający mógł od razu zobaczyć wszystkie korzyści, jakie ta strona ma dla niego. Przede wszystkim ten suwak jest responsywny, co również jest świetne.

4. Suwak CSS bez linków

Chcę tylko zauważyć, że ten suwak nie używa linków! Domyślnie oprócz głównego obrazu (slajdu) widoczne są jeszcze 2 slajdy. Znajdują się za głównym. Zmiana slajdów odbywa się w pięknym trybie: najpierw dwa slajdy są rozsuwane i ten slajd staje się środkiem, który następnie staje się głównym. Slajd jest następnie powiększany i umieszczany przed innymi.

5. Responsywny suwak w CSS3

Kolejny responsywny suwak z kontrolkami przycisków radiowych. Aby zobaczyć, jak ten suwak będzie wyglądał na różnych urządzeniach - możesz samodzielnie zmienić okno przeglądarki lub na stronie z suwakiem znajdują się specjalne ikony dla różnych urządzeń, po kliknięciu których zobaczysz, że suwak będzie wyglądał na Twoim komputerze , tablet lub smartfon.

*** SUWAK BONUSOWY ***

Oprócz wszystkich przedstawionych powyżej suwaków, chcę cię zadowolić jeszcze jednym. Ten suwak jest idealny do tworzenia galerii obrazów. Słowa nie potrafią wyjaśnić, co robi, więc lepiej obejrzyj wszystko na wideo:

Wyjście

Za pomocą suwaków możesz pięknie zaprojektować galerie zdjęć, umieszczając je bardziej zwięźle, wstawić suwak na pierwszy ekran (część strony, która jest widoczna bez przewijania) strony sprzedaży, aby natychmiast pokazać odwiedzającemu główne korzyści, które otrzyma. Nadal możesz znaleźć wiele sposobów, gdzie i jak możesz używać suwaków, ale jedno jest jasne - przydają się, gdy są używane poprawnie.

Pozycje, które zostały omówione w artykule.

W tym samouczku stworzymy świetny suwak CSS3. Użyje efektu zanikania między slajdami. Dodatkowo możesz użyć opisu dla każdego obrazu. Do uporządkowania informacji zostanie użyta lista nieuporządkowana. Slajdy zostaną automatycznie przełączone przy użyciu animacji CSS3.

znaczniki HTML

Znaczniki HTML są bardzo proste. Przykład ma cztery slajdy. Każdy z nich składa się z obrazu (jako tła) i tekstu opisu w elemencie div. Bardzo łatwo jest włożyć dodatkowe szkiełka.

CSS

Suwak używa animacji CSS3 anim_slides i anim_titles. Pierwszy służy do pojedynczych slajdów, drugi do tekstu opisowego. W opisie zmienia się również położenie i przezroczystość.

/ * Suwak * / .slides (wysokość: 300px; margines: 50px auto; przepełnienie: ukryte; pozycja: względna; szerokość: 900px;) .slides ul (styl listy: brak; pozycja: względna;) / * Klatki animacji # anim_slides * / @ -webkit-keyframes anim_slides (0% (krycie: 0;) 6% (krycie: 1;) 24% (krycie: 1;) 30% (krycie: 0;) 100% (krycie: 0;) ) @ -moz-keyframes anim_slides (0% (krycie: 0;) 6% (krycie: 1;) 24% (krycie: 1;) 30% (krycie: 0;) 100% (krycie: 0;)). slides ul li (przezroczystość: 0; pozycja: bezwzględna; góra: 0; / * animacja css3 * / -nazwa-animacji-webkit: anim_slides; -czas trwania-animacji-webkit: 24,0s; -funkcja czasu-animacji-webkit: liniowy; -liczba-iteracji-animacji-webkit: nieskończona; -kierunek-animacji-webkit:normalny; -opóźnienie-animacji-webkit: 0; -stan-odtwarzania-animacji-webkit: działa; -tryb wypełniania-animacji-webkit : forwards; -moz-nazwa-animacji: anim_slides; -moz-animation-duration: 24.0s; -moz-animation-timing-function: linear; -moz-animation-ite liczba racji: nieskończona; -moz-kierunek animacji: normalny; -moz-animacja-opóźnienie: 0; -moz-animation-play-state: bieganie; -moz-animation-fill-mode: do przodu; ) / * Opóźnienia CSS3 * / .slides ul li: n-te-dziecko (2), .slides ul li: n-te-dziecko (2) div (-webkit-animation-delay: 6.0s; -moz-animation-delay: 6.0 s;). slides ul li: nth-child (4), .slides ul li: nth-child (4) div (-webkit-animation-delay: 18,0s; -moz-animation-delay: 18,0s;) .slides ul li img (wyświetlanie: blok;) / * Klatki animacji #anim_titles * / @ -webkit-keyframes anim_titles (0% (po lewej: 100%; krycie: 0;) 5% (po lewej: 10%; krycie: 1;) 20% ( po lewej: 10%; krycie: 1;) 25% (po lewej: 100%; krycie: 0;) 100% (po lewej: 100%; krycie: 0;)) @ -moz-keyframes anim_titles (0% (po lewej: 100) %; krycie: 0;) 5% (po lewej: 10%; krycie: 1;) 20% (po lewej: 10%; krycie: 1;) 25% (po lewej: 100%; krycie: 0;) 100% (po lewej) : 100%; krycie: 0;)) .slides ul li div (kolor tła: # 000000; promień obramowania: 10px 10px 10px 10px; cień pudełka: 0 0 5px #FFFFFF wstawka; kolor: #FFF FFF; rozmiar czcionki: 26px; po lewej: 10%; margines: 0 auto; wypełnienie: 20px; pozycja: bezwzględna; góra: 50%; szerokość: 200px; / * Animacja css3 * / -webkit-nazwa-animacji: anim_titles; -webkit-animacja-czas trwania: 24.0s; -webkit-animacja-funkcja czasowa: liniowa; -webkit-animacja-liczba-iteracji: nieskończona; -webkit-animacja-kierunek: normalny; -webkit-animacja-opóźnienie: 0; -webkit-animacja-stan odtwarzania: bieganie; -webkit-animacja-tryb wypełniania: do przodu; -moz-nazwa-animacji: anim_titles; -moz-animacja-czas trwania: 24. 0s; -moz-animacja-funkcja czasowa: liniowa; -moz-animacja-liczba-iteracji: nieskończona; -moz-kierunek animacji: normalny; -moz-animacja-opóźnienie: 0; -moz-animation-play-state: bieganie; -moz-animation-fill-mode: do przodu; )

Zbiór za darmo Suwak HTML i CSS przykłady kodu: karta, porównanie, pełny ekran, responsywny, prosty itp. Aktualizacja kolekcji czerwiec 2018. 7 nowych pozycji.

Spis treści

Powiązane artykuły

O kodzie

Zestaw ekranów onboardingowych w HTML/CSS/JS. Osobisty eksperyment z warstwami ikon PNG, przejściami CSS3 i flexboxem.

Suwak karty informacyjnej HTML, CSS i JavaScript.
Wykonane przez Andy Tran
23 listopada 2015

Suwak zdjęć działający w przeglądarkach stacjonarnych i mobilnych.
Wykonane przez taron
29 września 2014 r.

Porównanie suwaków (przed / po)

O kodzie

Prosty i przejrzysty suwak do porównywania obrazów, w pełni responsywny i gotowy na dotyk, wykonany za pomocą CSS i jQuery.

O kodzie

Suwak przed i po zawierający tylko html i css.

O kodzie

Bawić się nowym pomysłem za pomocą mojego dwuwarstwowego suwaka przed / po obrazie. Minimalizacja. Trzymam to waniliowe. Podoba mi się, jeśli to się przyda :)

Vanilla JS, minimalistyczny, ładny wygląd.
Wykonane przez Huw
3 lipca 2017 r.

O kodzie

Element suwaka „podział ekranu” z JavaScript.

Mały eksperyment dotyczący suwaka „przed” i „po” w pliku SVG. Maskowanie czyni to całkiem prostym. Ponieważ wszystko jest w formacie SVG, obrazy i podpisy ładnie się skalują. Do sterowania suwakiem użyto wtyczek Draggable i ThrowProps firmy GreenSock.
Wykonane przez Craiga Roblewsky'ego
17 kwietnia 2017

Wykorzystuje niestandardowe wejście zakresu dla suwaka.
Wykonane przez Dudley Storey
14 października 2016

Responsywny suwak porównywania obrazów z HTML, CSS i JavaScript.
Wykonane przez Ege Görgülü
3 sierpnia 2016

Suwak porównania wideo HTML5, CSS3 i JavaScript przed i po.
Wykonane przez Dudley Storey
24 kwietnia 2016

Poręczny suwak z możliwością przeciągania do szybkiego porównywania 2 obrazów, obsługiwany przez CSS3 i jQuery.
Wykonane przez CodyHouse
15 września 2014

Suwaki pełnoekranowe

O kodzie

Prosty slider oparty na wejściach radiowych. 100% czysty HTML + CSS. Działa również z klawiszami strzałek.

Responsywne: tak

Zależności: -

O kodzie

Ładny efekt przejścia dla suwaka pełnoekranowego.

O kodzie

Suwak poziomy paralaksy z Swiper.js.

O kodzie

Szybko reagujący, płynny suwak perspektywy 3D podczas ruchu myszy.

Pełnoekranowy suwak obrazu bohatera (motyw paneli przesuwania) z HTML, CSS i JavaScript.
Wykonane przez Tobiasa Bogliolo
25 czerwca 2017

Interakcja suwaka wykorzystująca efekty Velocity i Velocity (pakiet UI) w celu ulepszenia animacji. Animacja jest wyzwalana za pomocą klawiszy strzałek, kliknięcia nawigacji lub przewijania. Ta wersja zawiera ramki jako część interakcji.
Wykonane przez Stephena Scaff
11 maja 2017 r.

Prosty suwak w minimalistycznym stylu, aby pokazać obrazy. Część obrazu wyskakuje na każdym slajdzie.
Wykonane przez Nathana Taylora
22 stycznia 2017

Rzecz jest dość łatwa do dostosowania. Możesz bezpiecznie zmienić czcionkę, rozmiar czcionki, kolor czcionki, szybkość animacji. Na nowym slajdzie pojawi się pierwsza litera nowego ciągu w tablicy w JS. Łatwe tworzenie (lub usuwanie) nowego slajdu: 1. Dodaj nowe miasto w tablicy w JS. 2. Zmień zmienną liczby slajdów i umieść nowy obrazek na liście scss w CSS.
Wykonane przez Ruslana Pivovarova
8 października 2016

1. Ścieżka przycinania do ramki prostokąta maskującego obraz (tylko webkit).
2. Tryb mieszania dla tej maski.
3. Inteligentny system kolorów, po prostu umieść nazwę i wartość koloru w mapie sass, a następnie dodaj odpowiednią klasę z tą nazwą koloru do elementów i wszystko będzie działać!
4. Fajne boczne menu z napisami (kliknij mały przycisk na środku dema).
5. Vanilla js z po prostu< 200 lines of code (basically it’s just adds/removes classes).

Wykonane przez Nikolay Talanov
7 października 2016

Ten skośny slider z przewijaniem oparty na czystym JS i CSS (bez bibliotek).
Wykonane przez Victora Belozyorova
3 września 2016

Animacja suwaka z projektem Pokemon.
Wykonane przez pham mikun
18 sierpnia 2016

Suwak HTML, CSS i JavaScritp ze złożoną animacją i półkolorowym tekstem pod kątem.
Wykonane przez Ruslana Pivovarova
13 lipca 2016

Efekt paralaksy suwaka z HTML, CSS i JavaScript.
Wykonane przez Manuela Madeira
28 czerwca 2016

Suwak HTML, CSS i JavaScript z efektem ripple.
Wykonane przez Pedro Castro
21 maja 2016

Clip-Path odsłaniający suwak z HTML, CSS i JavaScript.
Wykonane przez Nikolay Talanov
16 maja 2016

Suwak GSAP + Slick z podglądem poprzednich/następnych slajdów.
Wykonane przez Karlo Videk
27 kwietnia 2016

Suwak całej strony HTML, CSS i JavaScript.
Wykonane przez josepha martucci
28 lutego 2016

Pełny prototyp slidera z HTML, CSS i JavaScript.
Wykonane przez Gluber Sampaio
6 stycznia 2016

Pełnoekranowy, responsywny pokaz slajdów animowany za pomocą Greensocks TweenLite / Tweenmax.
Wykonane przez Arden
12 grudnia 2015

Wykonane przez Arden
5 grudnia 2015

Suwak pełnoekranowy (oś czasu GSAP) nr 1 z HTML, CSS i JavaScript.
Wykonane przez Diaco M. Lotfollahi
23 listopada 2015

Suwak HTML i CSS z niestandardowymi efektami.
Wykonane przez Nikolay Talanov
12 listopada 2015 r.

Pełnoekranowy suwak przeciągania z paralaksą z HTML, CSS i JavaScript.
Wykonane przez Nikolay Talanov
12 listopada 2015 r.

Proof of concept obrotowy suwak. Wykorzystuje ścieżkę przycinania i dużo matematyki.
Wykonane przez Tylera Johnsona
16 kwietnia 2015

Prosty pełnoekranowy suwak CSS i jQuery wykorzystujący płynność translateX i translate3d!
Wykonane przez józefa
19 sierpnia 2014

Responsywne suwaki

O kodzie

Suwak krycia obrazów

Suwak krycia obrazów w HTML i CSS.

Kompatybilne przeglądarki: Chrome, Edge, Firefox, Opera, Safari

Responsywne: tak

Zależności: -

O kodzie

Elastyczny układ slajdów ułożonych w stos

Ten przykład ilustruje, jak utworzyć układ slajdów ułożonych jeden na drugim (przydatne zwłaszcza przy przejściach z pojawianiem się/zanikaniem). Osiąga się to bez ustawiania ich wysokości i unikania pozycji: bezwzględne; dzięki czemu są w pełni elastyczne i łatwe do utrzymania w normalnym przepływie strony.

Kompatybilne przeglądarki: Chrome, Edge, Firefox, Opera, Safari

Responsywne: tak

Zależności: -

O kodzie

Responsywny suwak

Animowany responsywny suwak w HTML, CSS i JavaScript.

Kompatybilne przeglądarki: Chrome, Edge, Firefox, Opera, Safari

Responsywne: tak

Zależności: animate.css

O kodzie

Suwak z zamaskowanym tekstem

Suwak tylko CSS z zamaskowanym tekstem.

Kompatybilne przeglądarki: Chrome, Edge (częściowo), Firefox, Opera, Safari

Responsywne: tak

Zależności: -

O kodzie

Obraz i treść z efektem paralaksy.

O kodzie

Galeria slajdów tylko CSS.

Kompatybilne przeglądarki: Chrome, Edge, Firefox, Opera, Safari

Responsywne: tak

Zależności: -

O kodzie

Czysty suwak HTML / CSS

Suwak czystego HTML / CSS z okrągłym paskiem postępu SVG.

Kompatybilne przeglądarki: Chrome, Edge (częściowo), Firefox (częściowo), Opera, Safari

Responsywne: tak

Zależności: font-awesome.css

O kodzie

Eksperyment polegający na stworzeniu całkowicie responsywnego pionowego suwaka z miniaturami przy użyciu wyłącznie CSS i zachowującym proporcje obrazów.

O kodzie

Prosty suwak/karuzela obrazu Flexbox wykonana za pomocą waniliowego JavaScript.

O kodzie

Jest to eksperyment, który symuluje efekt rozmycia ruchu przy każdym przełączeniu slajdu. Wykorzystuje filtr SVG Gaussian Blur i niektóre animacje klatek kluczowych CSS. Chociaż efekt nie wymaga żadnego JavaScriptu do poprawnego działania, w tym przykładzie JavaScript jest używany tylko dla funkcjonalności suwaka.

O kodzie

Fajny animowany suwak z JS.

O kodzie

To jest eksperyment pokazujący, w jaki sposób wzorce SVG mogą pomóc nam w tworzeniu zamaskowanych obrazów dla suwaka obrazu zawierającego tylko CSS.

Poznawanie niektórych przejść suwaka. Suwak z włączoną opcją paralaksy. Zabawa z filtrami CSS głównie tutaj.
Wykonane przez Mirko Zorić
12 czerwca 2017 r.

Prosty suwak GSAP z subtelnymi animacjami animacji.
Wykonane przez Gorana Vrban
9 czerwca 2017

Slider UI z HTML, CSS i JavaScript.
Wykonane przez Mergima Ujkani
6 czerwca 2017

Suwak GSAP wersja 2.
Wykonane przez em an
4 maja 2017 r.

Mały suwak przejścia z prostym dodawaniem klasy. Trzeba trochę wygładzić czasy i zdecydować się na najlepsze podejście do urządzeń mobilnych (po prostu stosuj, dodawaj zdarzenia dotykowe, twórz pełny widok obrazu itp. Obsługuje kółko przewijania (scroll jacking), przyciski nawigacyjne i klawisze strzałek. Może również zwiększyć opakowanie treści aby obrazy wypełniały rzutnię w stanie bez animacji, co też jest całkiem fajne.
Wykonane przez Stephena Scaff
3 stycznia 2017 r.

Wykorzystano CSS border-image i clip-path, aby stworzyć efekt animacji suwaka.
Wykonane przez emily hayman
31 grudnia 2016

Mały slider z flexboxem. Nieco responsywny i może mieć stałe elementy wzdłuż obszaru suwaka.
Wykonane przez Roberta
28 listopada 2016

Suwak płótna HTML, CSS.
Wykonane przez Nvagelis
29 października 2016

Płynny suwak HTML, CSS i JavaScript 3D.
Wykonane przez Eduardo Allegrini
19 października 2016

Suwak do babeczek HTML i CSS z posypką!
Wykonane przez Jamiego Coultera
14 października 2016

Wykonane przez mario s maselli
12 października 2016

Eksploracja animacji UI nr 2 za pomocą HTML, CSS i JavaScript.
Wykonane przez mario s maselli
22 września 2016

Eksploracja animacji UI nr 3 za pomocą HTML, CSS i JavaScript.
Wykonane przez mario s maselli
22 września 2016

Ecommerce Slider v2.0 z HTML, CSS i JavaScript.
Wykonane przez Pedro Castro
17 września 2016

Czysty suwak HTML, CSS i JavaScript z zakrzywionym tłem.
Wykonane przez Ruslana Pivovarova
13 września 2016

Eksploracja animacji UI nr 1 za pomocą HTML, CSS i JavaScript.
Wykonane przez mario s maselli
8 września 2016

Ciesz się mocą CSS: w górę iw dół każdy środkowy obraz oraz stronicowany suwak z lightboxem.
Wykonane przez Kseso
15 sierpnia 2016

Podwójna ekspozycja to technika fotograficzna, która łączy 2 różne obrazy w jeden obraz.
Wykonane przez misaki nakano
3 sierpnia 2016

Suwak przy użyciu klipu właściwości CSS3.
Wykonane przez Pedro Castro
1 maja 2016

Responsywny suwak CSS.
Wykonane przez geekwen
19 kwietnia 2016

Jest to prosty eksperyment z suwakiem, wyświetlający słowa o pięknych znaczeniach, których nie można bezpośrednio przetłumaczyć. Focus: elegancka typografia i proste, ale urzekające przejścia.
Wykonane przez Joe Harry'ego
5 kwietnia 2016

Ideą animacji jest zmiana wartości ścieżki klipu CSS, a tym samym stworzenie efektu maskowania.
Wykonane przez Bhakti Al Akbar
31 marca 2016

Suwak z kropkami z HTML, CSS i JavaScript.
Wykonane przez Dereka Nguyen
16 marca 2016

Suwak efektu pryzmatu z HTML, CSS i JavaScript.
Wykonane przez zwycięzcę
12 marca 2016

Przesuwana galeria w tle z HTML, CSS i JavaScript.
Wykonane przez Rona Gierlacha
30 listopada 2015 r.

Rozwiązanie suwaka HTML, CSS i JavaScript.
Wykonane przez Jürgena Genser
30 września 2015

Suwak produktu obsługiwany przez Sequence.js. Sequence.js — responsywna struktura animacji CSS do tworzenia unikalnych sliderów, prezentacji, banerów i innych aplikacji opartych na krokach.
Wykonane przez Iana Lunn
15 września 2015

Suwak z małym kółkiem.
Wykonane przez Brama de Haan
11 sierpnia 2015 r.

Responsywny slider GTA V z HTML, CSS i JavaScript.
Wykonane przez eduarda mayera
24 stycznia 2014

Jest jak suwak, ale obraca się sześciennie z nieznanych powodów.
Wykonane przez Erica Brewera
4 grudnia 2013 r.

Wykonane przez Hugo DarbyBrowna
28 sierpnia 2013 r.

Proste suwaki

Suwak nakładki obrazu z HTML, CSS i waniliowym JavaScriptem.
Wykonane przez Yugam
7 czerwca 2017

Suwak z polecanymi obrazami HTML i CSS.
Wykonane przez Joshua Hibbert
16 czerwca 2016

Suwak obrazu wieloosiowego

Wieloosiowy suwak obrazu z HTML, CSS i JavaScript.
Wykonane przez Buraka Can
22 lipca 2013 r.

Suwak sześcianu, mały eksperyment z przekształceniami 3d HTML5/CSS3.
Wykonane przez Ilyę K.
26 czerwca 2013