Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską. Czytaj więcej.

React.js to popularna i potężna biblioteka JavaScript do tworzenia interfejsów użytkownika. Można go używać do tworzenia dynamicznych, interaktywnych i responsywnych aplikacji internetowych.

Jednym z typowych komponentów, których możesz używać z React.js, jest karuzela. Jest to łatwe dzięki wbudowanym funkcjom React lub przy użyciu biblioteki innej firmy.

Co to jest karuzela i jakie są jej zastosowania?

Karuzela to element pokazu slajdów, który umożliwia cykliczne przeglądanie obrazów lub filmów. Jest najczęściej używany na stronach internetowych do prezentowania produktów lub usług lub prezentowania polecanych treści. Korzystanie z karuzeli ma wiele zalet, takich jak:

  • To skuteczny sposób na zwrócenie uwagi na ważne treści.
  • To świetny sposób na zaprezentowanie wielu zdjęć i filmów.
  • Pomaga utrzymać porządek i atrakcyjność wizualną strony.
  • Możesz go użyć do stworzenia interaktywnego doświadczenia użytkownika.
instagram viewer

Jak stworzyć karuzelę w React.js

Tworzenie karuzeli w React.js jest stosunkowo łatwe i istnieją dwie popularne biblioteki, z których możesz skorzystać. Możesz także użyć wbudowanych funkcji React, aby dodać karuzelę.

Korzystanie z wbudowanych funkcji

Pierwszą metodą tworzenia karuzeli w React.js jest wykorzystanie wbudowanych funkcji. React zapewnia potężny sposób tworzenia karuzeli przy użyciu komponentów. Możesz użyj haków React dodać i sterować karuzelą.

import Reaguj, { stan użycia } z 'reagować';

konst Karuzela = () => {
konst [indeks, ustawIndeks] = użyjStan(0);
konst długość = 3;

konst handlePrevious = () => {
konst nowyIndeks = indeks - 1;
setIndex (nowyIndeks < 0? długość - 1: nowyIndeks);
};

konst uchwytDalej = () => {
konst nowyIndeks = indeks + 1;
setIndex (nowyIndeks >= długość? 0: nowyIndeks);
};

powrót (
<div nazwa klasy ="karuzela">
<button onClick={uchwytPoprzedni}>Poprzedni</button>
<button onClick={uchwytDalej}>Następny</button>
<P>{indeks}</P>
</div>
);
};

eksportdomyślny Karuzela;

Ten kod używa haka useState do utworzenia zmiennej stanu o nazwie index. Spowoduje to śledzenie aktualnej pozycji w karuzeli.

Funkcje handlePrevious i handleNext dbają o aktualizację wartości indeksu, gdy użytkownik kliknie na Poprzedni I Następny guziki.

Na koniec znaczniki wyświetlają wartość indeksu w znaczniku akapitu. Jeśli chcesz, zamiast tekstu możesz wyświetlać obrazy lub filmy. Możesz także stylizować karuzelę za pomocą zwykłego CSS lub przy użyciu frameworka CSS, takiego jak Tailwind CSS.

Bez fantazyjnej stylizacji powinieneś zobaczyć podstawową parę przycisków i liczbę reprezentującą bieżący indeks:

Korzystanie z biblioteki pure-react-carousel

Drugą metodą tworzenia karuzeli w React.js jest biblioteka pure-react-carousel. Ta biblioteka zapewnia potężny sposób tworzenia karuzeli przy użyciu komponentów. Aby korzystać z biblioteki, musisz ją najpierw zainstalować za pomocą polecenia:

np zainstalować czysta karuzela reakcji

Po zainstalowaniu biblioteki możesz użyć komponentu do utworzenia karuzeli. Oto przykład użycia komponentu Karuzela:

import Reagować z 'reagować';
import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } z „karuzela czystych reakcji”;
import 'pure-react-carousel/dist/react-carousel.es.css';

konst Karuzela = () => {
powrót (
<Dostawca karuzeli
naturalSlideWidth={100}
naturalSlideHeight={120}
totalSlides={3}
>
<Suwak>
<Indeks slajdu={0}>Slajd 1</Slide>
<Indeks slajdu={1}>Slajd 2</Slide>
<Indeks slajdu={2}>Slajd 3</Slide>
</Slider>
<PrzyciskWstecz>Z powrotem</ButtonBack>
<Przycisk Dalej>Następny</ButtonNext>
</CarouselProvider>
);
};

eksportdomyślny Karuzela;

W tym kodzie widać, że komponent CarouselProvider definiuje ogólne ustawienia karuzeli, takie jak naturalSlideWidth, naturalSlideHeight i totalSlides.

Komponent Slider zawiera kilka instancji Slider. Komponent Slajd definiuje każdy pojedynczy slajd.

Wreszcie składniki ButtonBack i ButtonNext obsługują nawigację karuzelową.

Korzystanie z biblioteki pure-react-carousel ma wiele zalet, takich jak:

  • Łatwy w użyciu: Podczas gdy wbudowana metoda wymaga więcej kodu do utworzenia karuzeli, biblioteka zapewnia prostszy sposób tworzenia karuzeli w React.js.
  • Czuły: Biblioteka zapewnia możliwość tworzenia responsywnych karuzel. Dzięki wbudowanej metodzie musiałbyś utworzyć oddzielną karuzelę dla różnych rozmiarów ekranu.
  • Dostosowywanie: Biblioteka zawiera wiele funkcji, których można użyć do dostosowania karuzeli, takich jak autoodtwarzanie, strzałki nawigacyjne, paginacja i inne.

Korzystanie z biblioteki reakcji-responsywnej-karuzeli

Ostatnią metodą tworzenia karuzeli w React.js jest biblioteka react-responsive-carousel. Dzięki tej bibliotece możesz stworzyć karuzelę z wykorzystaniem komponentów. Aby korzystać z biblioteki, musisz ją najpierw zainstalować za pomocą polecenia:

np zainstalować Reaguj-reaguj-karuzela

Po zainstalowaniu biblioteki możesz użyć komponentu do utworzenia karuzeli. Oto przykład użycia komponentu Karuzela:

import Reagować z 'reagować';
import { Karuzela } z „reaguj-reaguj-karuzela”;
import 'Reaguj-responsywna-karuzela/lib/styles/carousel.min.css';

konst Strona karuzeli = () => {
powrót (
<Karuzela>
<dz>
<źródło img="https://placehold.co/100x100" />
<p nazwa klasy ="legenda">Legenda 1</P>
</div>
<dz>
<źródło img="https://placehold.co/200x200" />
<p nazwa klasy ="legenda">Legenda 2</P>
</div>
<dz>
<źródło img="https://placehold.co/300x300" />
<p nazwa klasy ="legenda">Legenda 3</P>
</div>
</Carousel>
);
};

eksportdomyślny Strona karuzeli;

W tym kodzie widać, że komponent Carousel definiuje karuzelę. Wewnątrz komponentu Carousel div zawiera każdy pojedynczy slajd. Każdy slajd może zawierać obraz oraz legendę do tego obrazu. Biblioteka zapewnia również szereg opcji i ustawień, których można użyć do dostosowania karuzeli.

Korzystanie z biblioteki reagującej na karuzelę ma wiele zalet, takich jak:

  • Jedna z najpopularniejszych bibliotek: Biblioteka jest jedną z najpopularniejszych bibliotek do tworzenia karuzel w React.js. Jeśli więc utkniesz, możesz łatwo znaleźć pomoc od społeczności.
  • Łatwy w użyciu: Wystarczy kilka linijek kodu, aby łatwo stworzyć karuzelę.
  • Czuły: Biblioteka zapewnia możliwość tworzenia responsywnych karuzel.
  • Dostosowywanie: Biblioteka udostępnia również wiele funkcji, których można użyć do dostosowania i nadawania stylu karuzelom.

Popraw wrażenia użytkownika dzięki karuzeli

Dzięki karuzeli możesz przekazać użytkownikom więcej informacji i ułatwić im interakcję z witryną. Karuzele pomagają również w utrzymaniu porządku i atrakcyjności wizualnej strony. W rezultacie jest to świetny sposób na poprawę doświadczenia użytkownika.

Możesz także śledzić interakcję użytkownika z karuzelami i wykorzystywać dane do optymalizacji doświadczenia użytkownika. Pomoże Ci to stworzyć lepsze doświadczenie użytkownika w Twojej witrynie. Następnie możesz bezpłatnie wdrożyć swoją aplikację React na platformach takich jak strony Github, co jest łatwe i opłacalne.