Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

React.js je populární a výkonná JavaScriptová knihovna pro vytváření uživatelských rozhraní. Můžete jej použít k vytváření dynamických, interaktivních a responzivních webových aplikací.

Jednou z běžných součástí, kterou můžete s React.js používat, je karusel. Je to snadné, buď pomocí vestavěných funkcí React nebo pomocí knihovny třetí strany.

Co je to kolotoč a jaké je jeho použití?

Karusel je komponenta prezentace, která umožňuje procházet obrázky nebo videa. Nejčastěji se používá na webových stránkách k předvádění produktů nebo služeb nebo k předvádění doporučeného obsahu. Používání karuselu má mnoho výhod, například:

  • Je to účinný způsob, jak upozornit na důležitý obsah.
  • Je to skvělý způsob, jak předvést více obrázků a videí.
  • Pomáhá udržovat stránku organizovanou a vizuálně přitažlivou.
  • Můžete jej použít k vytvoření interaktivní uživatelské zkušenosti.
instagram viewer

Jak vytvořit karusel v React.js

Vytvoření karuselu v React.js je poměrně snadné a existují dvě oblíbené knihovny, které můžete použít. Můžete také použít vestavěné funkce React a přidat karusel.

Použití vestavěných funkcí

První metodou vytvoření karuselu v React.js je využití vestavěných funkcí. React poskytuje účinný způsob, jak vytvořit karusel pomocí komponent. Můžeš použijte háky React přidat a ovládat karusel.

import Reagovat, { useState } z 'reagovat';

konst Kolotoč = () => {
konst [index, setIndex] = useState(0);
konst délka = 3;

konst handlePředchozí = () => {
konst newIndex = index - 1;
setIndex (newIndex < 0? délka - 1: novýIndex);
};

konst handleDalší = () => {
konst newIndex = index + 1;
setIndex (newIndex >= délka? 0: newIndex);
};

vrátit se (
<div název_třídy="kolotoč">
<button onClick={handlePrevious}>Předchozí</button>
<button onClick={handleNext}>další</button>
<p>{index}</str>
</div>
);
};

vývoznívýchozí Kolotoč;

Tento kód používá háček useState k vytvoření stavové proměnné s názvem index. To bude sledovat aktuální pozici v karuselu.

Funkce handlePrevious a handleNext se postarají o aktualizaci hodnoty indexu, když uživatel klikne na Předchozí a další tlačítka.

Nakonec značka zobrazí hodnotu indexu ve značce odstavce. Pokud chcete, můžete místo textu zobrazovat obrázky nebo videa. Carusel můžete také nastylovat pomocí běžného CSS popř pomocí frameworku CSS, jako je Tailwind CSS.

Bez jakéhokoli efektního stylu byste měli vidět základní pár tlačítek a číslo představující aktuální index:

Použití čisté-react-carousel Library

Druhou metodou vytvoření karuselu v React.js je knihovna pure-react-carousel. Tato knihovna poskytuje výkonný způsob, jak vytvořit karusel s použitím komponent. Chcete-li knihovnu používat, musíte ji nejprve nainstalovat pomocí příkazu:

npm Nainstalujte čistý-reakční-kolotoč

Jakmile knihovnu nainstalujete, můžete komponentu použít k vytvoření karuselu. Zde je příklad použití komponenty Carousel:

import Reagovat z 'reagovat';
import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } z 'pure-react-carousel';
import 'pure-react-carousel/dist/react-carousel.es.css';

konst Kolotoč = () => {
vrátit se (
<CarouselProvider
naturalSlideWidth={100}{101}
naturalSlideHeight={120}
totalSlides={3}
>
<Posuvník>
<Index snímku={0}>Snímek 1</Slide>
<Index snímku={1}>Snímek 2</Slide>
<Index snímku={2}>Snímek 3</Slide>
</Slider>
<ButtonBack>Zadní</ButtonBack>
<Tlačítko Další>další</ButtonNext>
</CarouselProvider>
);
};

vývoznívýchozí Kolotoč;

V tomto kódu můžete vidět, že komponenta CarouselProvider definuje obecná nastavení pro karusel, jako jsou naturalSlideWidth, naturalSlideHeight a totalSlides.

Komponenta Slider obsahuje několik instancí Slide. Komponenta Snímek definuje každý jednotlivý snímek.

A konečně komponenty ButtonBack a ButtonNext zvládají karuselovou navigaci.

Používání knihovny čistého reagování karuselu má mnoho výhod, jako například:

  • Snadné použití: Zatímco vestavěná metoda vyžaduje více kódu k vytvoření karuselu, knihovna poskytuje jednodušší způsob, jak vytvořit karusel v React.js.
  • Responzivní: Knihovna poskytuje možnost vytvářet responzivní karusely. S vestavěnou metodou byste museli vytvořit samostatný karusel pro různé velikosti obrazovek.
  • Přizpůsobení: Knihovna poskytuje mnoho funkcí, které můžete použít k přizpůsobení karuselu, jako je automatické přehrávání, navigační šipky, stránkování a další.

Použití reagující-responzivní-kolotočové knihovny

Poslední metodou vytváření karuselu v React.js je knihovna reagovat-responsive-carousel. Pomocí této knihovny můžete vytvořit karusel s použitím komponent. Chcete-li knihovnu používat, musíte ji nejprve nainstalovat pomocí příkazu:

npm Nainstalujte reagovat-responzivní-kolotoč

Jakmile knihovnu nainstalujete, můžete komponentu použít k vytvoření karuselu. Zde je příklad použití komponenty Carousel:

import Reagovat z 'reagovat';
import { Carousel } z 'react-responsive-carousel';
import 'reagovat-responzivní-carousel/lib/styles/carousel.min.css';

konst CarouselPage = () => {
vrátit se (
<Kolotoč>
<div>
<img src="https://placehold.co/100x100" />
<p název_třídy="legenda">Legenda 1</str>
</div>
<div>
<img src="https://placehold.co/200x200" />
<p název_třídy="legenda">Legenda 2</str>
</div>
<div>
<img src="https://placehold.co/300x300" />
<p název_třídy="legenda">Legenda 3</str>
</div>
</Carousel>
);
};

vývoznívýchozí CarouselPage;

V tomto kódu můžete vidět, že komponenta Carousel definuje karusel. Uvnitř komponenty Carousel obsahuje prvek div každý jednotlivý snímek. Každý snímek může obsahovat obrázek a také legendu k tomuto obrázku. Knihovna také poskytuje řadu možností a nastavení, které můžete použít k přizpůsobení karuselu.

Používání knihovny reagujícího karuselu má mnoho výhod, například:

  • Jedna z nejoblíbenějších knihoven: Knihovna je jednou z nejoblíbenějších knihoven pro vytváření karuselů v React.js. Takže pokud jste uvízli, můžete snadno najít pomoc od komunity.
  • Snadné použití: S pouhými několika řádky kódu můžete snadno vytvořit karusel.
  • Responzivní: Knihovna poskytuje možnost vytvářet responzivní karusely.
  • Přizpůsobení: Knihovna také poskytuje mnoho funkcí, které můžete použít k přizpůsobení a úpravě karuselu.

Zlepšete uživatelský dojem pomocí karuselu

Pomocí karuselu můžete uživatelům poskytnout více informací a pomoci jim snáze interagovat s vaším webem. Karusely také pomáhají udržovat stránku organizovanou a vizuálně přitažlivou. Ve výsledku je to skvělý způsob, jak zlepšit uživatelskou zkušenost.

Můžete také sledovat interakci uživatelů s vašimi karusely a používat data k optimalizaci uživatelského dojmu. To vám pomůže vytvořit lepší uživatelský dojem na vašem webu. Poté můžete svou aplikaci React nasadit zdarma na platformy, jako jsou stránky Github, což je snadné a nákladově efektivní.