19 suwaków lub karuzeli CSS i HTML dla Twojej witryny

darmowe suwaki

Posiadanie strony internetowe zajmujące całą szerokość ekranuOdkryliśmy, że można zintegrować pewne elementy, które mogą przydać się do wyświetlenia całej próbki produktów na sprzedaż lub wycieczek, które możemy zaoferować na lato. Karuzele czy slidery to jedne z tych elementów sieci, które pozwalają nam wizualnie pokazać nasze produkty w bardzo efektowny sposób.

L Darmowe slidery, scrollery czy karuzele w CSS które znajdziecie poniżej, stanowią one dobry repertuar do wszelkiego rodzaju celów w pracy, który pokażemy klientowi, zanim zaakceptuje nasz budżet. Jest to zbiór suwaków w HTML i CSS z odrobiną JavaScript w formacie poziomym i pionowym. Zrobimy to, abyś mógł uzyskać dostęp do kodu i szybko je zaimplementować.

Poziome karuzele

Czuły

Ta karuzela składa się z pliku dość krzykliwa animacja tak jakbyśmy rysowali kurtynę, aby po prostu pomniejszyć zdjęcia i ikony profili, które zamierzamy ustanowić na tym suwaku. Jest to idealna karuzela dla opinii użytkowników, którzy są bardzo zadowoleni z produktów, które sprzedajemy w sieci.

Podobne artykuł:
27 suwaków HTML i CSS, które nadadzą Twojej witrynie wyjątkowy charakter

Responsywna nieskończona karuzela

Reprodukcja własna

Ten suwak jest jak reklamy, które czasami można zobaczyć na boiskach piłkarskich po bokach i wyświetlając różne reklamy przewijane w poziomie. Jest to idealne rozwiązanie w przypadku stron docelowych, które muszą przedstawiać partnerów marki i inne rodzaje logo.

React Carousel

Karuzela 3D

Ten zwój wyróżnia się React.js. To nadaje się do wyświetlania obrazów w proporcjonalnym rozmiarze, gdy przechodzimy od jednego obrazu do drugiego w ciągłej animacji. Niewiele więcej do powiedzenia na temat tego dość prostego kodu CSS, ale przyniesie on wielki efekt, jeśli wiemy, jak prawidłowo go ustawić w sieci.

Gładki suwak 3D

Karuzela 3D

Złożona z HTML, CSS i JavaScript ta karuzela 3D wyróżnia się płynnością i wysoce wizualna animacja odbijania. Z serią elementów, które identyfikują każdą kartę, pracę i przyciągającą wzrok karuzelą, aby włączyć ją do swojej witryny.

Podobne artykuł:
46 suwaków i scrollerów JavaScript

Automatyczna nieskończona karuzela

Nieskończona karuzela

Suwak, który, jak ostrzega jego własna nazwa, jest wyświetlany automatycznie bez interakcji użytkownika w mgnieniu oka z nim. Różne obrazy, które składają się na tę uderzającą karuzelę, pojawiają się z powodu przejścia, w którym magicznie zanika.

Unosząca się karuzela

Hover Carousel

Z elementem hover this suwak przesuwa się od lewej do prawejlub odwrotnie, gdy zostawiamy nad nim wskaźnik myszy. Płynne przejście między różnymi zdjęciami, które mogą składać się na ten suwak obrazu.

Mobilna karuzela

Mobilna karuzela

również o nazwie Carousel Material Designi przy aktualnym trendzie ze wszystkimi typami kart, tutaj możesz znaleźć kolejny artykuł z dużą liczbą z nich w CSS / HTML, dystansuje się od reszty, składając się z języka projektowania opublikowanego przez Google. Możesz przenosić różne karty, naciskając długo karty.

Karuzela kanałów na Instagramie

Instagram

Możesz rozbić ideę tego suwaka, który się wyróżnia paskiem obrazów, które można powiększyć klikając na jedną z nich. Animacja bardzo efektowna, choć skierowana do konkretnego typu serwisu. Posty na Instagramie przeniesione do karuzeli slick.js.

Prosta zsynchronizowana karuzela

Prosta karuzela

Ma to jednak wiele wspólnego z poprzednim, zwłaszcza na pasku obrazów interakcja z suwakiem jest zupełnie inna przesuwając go bocznym gestem od lewej do prawej i odwrotnie. Ponownie mamy slick.js, który robi swoje. Uderzający ze względu na wspaniały efekt.

Karuzele poziome 3D

Pozioma karuzela 3D

Jedna z najciekawszych karuzel na całej opublikowanej przez nas liście. Wyróżnia się Twoje poziome suwaki w CSS i HTML które poruszają się fantastycznie. Wystarczy pozostawić wskaźnik myszy nad polami, aby znaleźć różne efekty, które można uzyskać za pomocą czterech odmian.

Karuzela CSS

CSS 3D

Prosty i świetny efekt wizualny z seria kart na zmianę z przodu. Efekt jest w 3D, więc jest to jeden z tych suwaków, które przyciągają wiele uwagi, szczególnie ze względu na minimalny efekt odbicia, który pokazuje geniusz ze strony twórcy tego samego.

Ambilight Bootstrap Carousel

Karuzela Bootstrap

Prosty suwak o świetnym działaniu, który nie wyróżnia się zbytnio. Jest jednym z te proste suwaki której zwykle szukamy i która daje poczucie bycia jednym bez większych fanfar, ale która doskonale spełnia swoją funkcję.

Zespół Carousel

Zespół karuzeli

Jeśli chcesz przedstawić zespół redakcyjny, który masz na blogu, ten suwak jest doskonały w swojej roli. Dobry, podobny do poprzedniego, ponieważ jest prosty. Wyróżnia się wykorzystaniem diamentów do przechowywania każdego zdjęcia zespołu. Posiada automatyczne odtwarzanie.

Carousel Cube

Kostka 3D

Suwak, który wyróżnia się jako kostka, w której każda z twarzy jest jednym z obrazów lub zdjęcia, które chcemy wyświetlić na stronie internetowej. Wystarczy kliknąć każdy z nich, aby je przewinąć i dowiedzieć się, jakie treści na Ciebie czekają.

Klawisze strzałek karuzeli

Klucze CSS

Suwak, w którym przebiega interakcja za pomocą klawiszy strzałek. Proste bez fanfar, które prowadzą bezpośrednio do innego rodzaju interakcji, która wydaje się być taka, jak lata temu. Do określonego użytku.

Karuzele pionowe

Karuzela pionowa

Suwak ze świetnym efektem wizualnym automatycznie odtwarza w ciągłej animacji pionowej który wyróżnia się kartami z zaokrąglonymi rogami. Bardzo aktualny i jeden z wyróżniających się z całej listy.

Czysta karuzela CSS

Karuzela

Ta karuzela wyróżnia się rozszerzeniem menu boczne, z którego możemy wyjść klikając każdą z jego opcji. Informacja pojawia się z dobrze osiągniętym efektem odbicia bez wiele więcej niż to, co zostało powiedziane.

Pionowa karuzela reaguje

Karuzela

Podobne do poprzedni ze względu na swoją pionowość, chociaż ten suwak może zająć całą szerokość strony, aby wyświetlić obrazy każdej z jej zakładek. Ciekawe ze względu na duży format i wykorzystanie przejść CSS do przesuwania się między slajdami.

Karuzela dzielona 3D

Rozdzielenie (Split)

Świetny efekt wizualny ze wzorem suwaków, który obraca się w 3D z bardzo efektowna animacja. Możesz wybrać każdą z opcji z menu po lewej stronie z kropkami przy każdej z nich. Jeden z najlepszych na liście pod względem kreatywności.


Treść artykułu jest zgodna z naszymi zasadami etyka redakcyjna. Aby zgłosić błąd, kliknij tutaj.

4 komentarzy, zostaw swoje

Zostaw swój komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

*

*

  1. Odpowiedzialny za dane: Miguel Ángel Gatón
  2. Cel danych: kontrola spamu, zarządzanie komentarzami.
  3. Legitymacja: Twoja zgoda
  4. Przekazywanie danych: Dane nie będą przekazywane stronom trzecim, z wyjątkiem obowiązku prawnego.
  5. Przechowywanie danych: baza danych hostowana przez Occentus Networks (UE)
  6. Prawa: w dowolnym momencie możesz ograniczyć, odzyskać i usunąć swoje dane.

  1.   Mayra orellana powiedział

    Dzień dobry, chcę używać Pure CSS Carousel na mojej stronie, ale znajduje się ona tylko w jednej pozycji, jak mogę sprawić, by znajdowała się w miejscu, które chcę na mojej stronie.

    Bardzo proszę o pomoc

  2.   Xavier Cañizares powiedział

    Jak mogę sprawić, by Hover Carousel dobrze wyświetlało się w mobilnej wersji mojej witryny?

  3.   Gabriel powiedział

    Świetnie, co za dobrą robotę!

  4.   Tony Zambrano powiedział

    Witam powozownie są bardzo fajne ale jak tylko wrzucę to kopiuję i wklejam javascrip daje mi błąd bo var max = $('#c>li) .lenght…. Co sugerujesz