Logo Carousel Slaider

Logo Carusel Slider

Jak zrobić slider logotypów za pomocą tylko w HTML + CSS

Zobacz krok po kroku jak zrobić Logo Carusel Slider. Lekki slaider w html, który przesuwa się ciągle z prawej do lewej w pętli. To prostsze niż myślisz. Nie trzeba kupować wtyczek. Wystarczy że przygotujesz grafiki do slaidera, a następnie wkleisz kod podany poniżej na stronie np. do WordPressa (blok „Niestandardowy HTML” + „Dodatkowy CSS”).

Na ekranie pojawi się pasek z logotypami, które będą przesuwały się nieprzerwanie w poziomie (w lewo) w pętli. Ruch będzie płynny, a po najechaniu myszką cała animacja zatrzyma się, umożliwiając przyjrzenie się konkretnemu logo.

W naszym przykładzie Logo Carusel Slider, wszystkie logotypy w stanie domyślnym są wyszarzone dzięki zastosowaniu filtra grayscale(100%) oraz lekko przygaszone przez opacity(0.85), co nadaje im subtelny i spójny wygląd. Gdy użytkownik najedzie kursorem na wybrany logotyp, filtr zmienia się na grayscale(0%), przywracając pełne, naturalne kolory, a przezroczystość znika (opacity(1)), co sprawia, że logo staje się wyraźniejsze. Dodatkowo element lekko się powiększa (scale(1.04)), a wszystkie te zmiany odbywają się płynnie w ciągu 0,2 sekundy dzięki właściwości transition, co daje elegancki i przyjemny efekt wizualny, przyciągający uwagę do aktywnego elementu.

Zaczynamy!

Tak będzie wyglądał Twój Logo Carusel Slider

Slaider z ciemnymi logotypami

Po najechaniu logotypy stają się kolorowe

Krok po kroku jak samemu stworzyć slider logotypów

Przygotuj pliki graficzne do slidera

Pliki graficzne najlepiej aby były tych samych rozmiarów – tzn aby szerokość i wysokość w pikselach były dla wszystkich takie same. Ważne aby były lekki i opcjonalnie nie zawierały tła – czyli aby tło było przeźroczyste. Tu sprawdzą się pliki typu PNG lub SVG.

Przygotuj wszystkie pliki z logotypami w rozdzielczości 320 na 150 pikseli. Pamiętaj aby logotypy były wyśrodkowane i posiadały 5-10 pikseli marginesu od krawędzi. Ten margines przyda się jeżeli będziesz chciał aby logotypy powiększały się gdy najedziesz na nie myszką.
Rodzaj pliku graficznego może być dowolny np. JPG, PNG lub SVG. Przy czym pliki JPG – nie posiadają przeźroczystości, a pliki svg mogą wymagać instalacji w WordPressie dodatkowej wtyczki (np. SVG Support). Najbardziej funkcjonalnym plikiem przy logotypach jest tu PNG, który zachowuje dobrą rozdzielczość i pozwala na dodanie przeźroczystości co jest bardzo istotne jeżeli chcemy dać jakieś tło pod slaiderem.

Jak wkleić kod slaidera na stronę

Nasz slaider będzie miał styl oznaczony jako .logos1.W WordPressie możesz wkleić kod HTML slajdera na kilka sposobów, a to, które wybierzesz, zależy od tego, gdzie ma się on wyświetlać (np. na konkretnej podstronie, w stopce, w widżecie, w nagłówku). Aby wstawić slaider .logos1 musisz wkleić dwie rzeczy:

HTML – struktura slajdera
CSS – jego styl

Wklejenie na konkretnej stronie lub wpisie w edytorze Gutenberg

W edytorze WordPress (Gutenberg):

Otwórz stronę lub wpis, gdzie chcesz dodać slider.
Kliknij „+” i wybierz Blok → Niestandardowy HTML i wklej HTML slajdera.
Następnie wejdź w Kokpit → Wygląd → Personalizuj → Dodatkowy CSS.
Wklej tam cały kod .logos1 { … } i zapisz zmiany

Wklejenie do szablonu (Elementor, Divi itp.)

W Elementorze:

Dodaj widget HTML w miejscu, gdzie ma być slider.
Wklej kod HTML slajdera.
CSS wklej w Ustawienia → Dostosuj → Dodatkowy CSS lub w Ustawienia strony → CSS.

W Divi:

Dodaj Moduł → Kod i wklej HTML.
CSS wklej w na stornie w polu Niestandardowe CSS. Pole to jest znajdziesz: Ustawienia strony → Zawansowane → Niestandardowe CSS.

Kod html

W poniższym kodzie zmień linki do własnych grafik i opis alt=””.

<!– GRUPA A –>

Kod CSS

/* USTAWIENIA dla logos1 */
.logos1 {
–gap: clamp(16px, 3vw, 40px); /* odstęp między logotypami */
–duration: 25s; /* ustawienie prędkości przesunięcia logotypów – im większa wartość = wolniej */
}

/* Maska widoku */
.logos1-mask {
overflow: hidden;
width: 100%;
position: relative;
}

/* Tor, który przesuwamy */
.logos1-track {
display: flex;
width: max-content; /* ważne: szerokość = suma zawartości */
will-change: transform;
animation: logos-scroll var(–duration) linear infinite;
}

.logos1-mask:hover .logos1-track { animation-play-state: paused; }
/* zapauzowanie animacji gdzy najedzie się myszką na logotyp */

/* Dwie identyczne grupy */
.logos1-group {
display: flex;
align-items: center;
gap: var(–gap);
flex: 0 0 auto; /* nie pozwól kurczyć */
}

/* Obrazki */
.logos1-group img {
height: clamp(28px, 5vw, 60px);
width: auto;
display: block;
vertical-align: middle;
flex: 0 0 auto;
filter: grayscale(100%) opacity(0.85);
transition: filter .2s ease, transform .2s ease;
}
.logos1-group img:hover {
filter: grayscale(0%) opacity(1);
transform: scale(1.04);
}

/* Styl dla linków w sliderze */
.logos1-group a {
display: flex; /* utrzymuje wymiar logo */
align-items: center;
flex: 0 0 auto; /* nie pozwól na zmianę szerokości */
margin-right: var(–gap); /* dodaje przerwę między grupami */
}

.logos1-group a:hover img {
filter: grayscale(0%) opacity(1);
transform: scale(1.04);
}

/* Animacja: przesuwamy tor o pół jego szerokości (czyli dokładnie jedną grupę) */
@keyframes logos-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
.logos1-track { animation: none; }
}

Jak to działa (w skrócie)

W kodzie html wstawiasz identyczny zestaw logotypów dwa razy (A + B). Animacja przesuwa całość o -50%, czyli dokładnie o szerokość pierwszego zestawu – dzięki temu mamy płynny loop bez skoków.

Jak dostosować slaider do swoich potrzeb

Prędkość: zmień –duration (np. 35s = wolniej, 15s = szybciej).
Odstępy: zmień –gap.
Wysokość logotypów: zmień height w .logos1-track img.
Pauza na hover: usuń regułę animation-play-state: paused; jeśli nie chcesz pauzy.
Używaj plików SVG tam gdzie możesz, dla PNG/JPG dodaj loading=”lazy”

Praktyczne wskazówki

Minimalna liczba logo

Technicznie mogą to być nawet 2 loga, ale wtedy przesuw będzie wyglądał ubogo.
Optymalnie: 5–10 logotypów w jednej grupie.

Zbyt mało logo

Jeśli loga w grupie A zajmują bardzo mało szerokości ekranu, użytkownik zobaczy tę samą grafikę z grupy B niemal od razu, co psuje efekt.
Rozwiązanie: dodać więcej logo albo zwiększyć ich wielkość.

Zbyt dużo logo

Przy np. 15–20 logach jedna pełna pętla będzie trwała długo (zależnie od –duration).
Jeśli chcesz, żeby każde logo było widoczne przez określony czas (np. ~2 sekundy), trzeba policzyć czas przesuwu względem liczby logo.

Przykłady Logo Carusel Slider

Slaider na ciemnym tle

Po najechaniu logotypy delikatnie się powiększają

Slaider z powiększeniem logotypów z cieniem

Z lwej i prawej strony jest cień. Logotypy wyłaniają się z niego i z drugiej strony się w nim chowają. Po najechaniu logotypy stają delikatnie się powiększają.