Hur man bygger en interaktiv karusell i React.js

Hur man bygger en interaktiv karusell i React.js
Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision. Läs mer.

React.js är ett populärt och kraftfullt JavaScript-bibliotek för att skapa användargränssnitt. Du kan använda den för att bygga dynamiska, interaktiva och responsiva webbapplikationer.





En av de vanligaste komponenterna du kan använda med React.js är karusellen. Det är enkelt att göra, antingen med inbyggda React-funktioner eller genom att använda ett tredjepartsbibliotek.



MAKEUSE AV DAGENS VIDEO

En karusell är en bildspelskomponent som låter dig bläddra genom bilder eller videor. Det används oftast på webbplatser för att visa upp produkter eller tjänster eller för att visa upp utvalt innehåll. Det finns många fördelar med att använda en karusell, till exempel:





  • Det är ett effektivt sätt att uppmärksamma viktigt innehåll.
  • Det är ett bra sätt att visa upp flera bilder och videor.
  • Det hjälper till att hålla sidan organiserad och visuellt tilltalande.
  • Du kan använda den för att skapa en interaktiv användarupplevelse.

Att skapa en karusell i React.js är relativt enkelt och det finns två populära bibliotek som du kan använda. Du kan också använda inbyggda React-funktioner för att lägga till en karusell.

Använda inbyggda funktioner

Den första metoden för att skapa en karusell i React.js är att använda sig av inbyggda funktioner. React ger ett kraftfullt sätt att skapa en karusell genom att använda komponenter. Du kan använd React-krokar för att lägga till och styra en karusell.



import React, { useState } from 'react';

const Carousel = () => {
const [index, setIndex] = useState(0);
const length = 3;

const handlePrevious = () => {
const newIndex = index - 1;
setIndex(newIndex < 0 ? length - 1 : newIndex);
};

const handleNext = () => {
const newIndex = index + 1;
setIndex(newIndex >= length ? 0 : newIndex);
};

return (
<div className="carousel">
<button onClick={handlePrevious}>Previous</button>
<button onClick={handleNext}>Next</button>
<p>{index}</p>
</div>
);
};

export default Carousel;

Den här koden använder useState-kroken för att skapa en tillståndsvariabel som kallas index. Detta kommer att hålla reda på den aktuella positionen i karusellen.

Funktionerna handlePrevious och handleNext tar hand om uppdateringar av indexvärdet när användaren klickar på Tidigare och Nästa knappar.



Slutligen visar uppmärkningen indexvärdet i en stycketagg. Du kan visa bilder eller videor istället för text om du vill. Du kan också styla karusellen med vanlig CSS eller använder ett CSS-ramverk som Tailwind CSS .

Utan någon snygg stil bör du se ett par grundläggande knappar och ett nummer som representerar det aktuella indexet:



reager app med karuseller med inbyggda funktioner

Den andra metoden för att skapa en karusell i React.js är biblioteket pure-react-carousel. Detta bibliotek ger ett kraftfullt sätt att skapa en karusell med hjälp av komponenter. För att använda biblioteket måste du först installera det med kommandot:

bästa wifi -app för Android
npm install pure-react-carousel

När du har installerat biblioteket kan du använda komponenten för att skapa en karusell. Här är ett exempel på hur du använder karusellkomponenten:

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

const Carousel = () => {
return (
<CarouselProvider
naturalSlideWidth={100}
naturalSlideHeight={120}
totalSlides={3}
>
<Slider>
<Slide index={0}>Slide 1</Slide>
<Slide index={1}>Slide 2</Slide>
<Slide index={2}>Slide 3</Slide>
</Slider>
<ButtonBack>Back</ButtonBack>
<ButtonNext>Next</ButtonNext>
</CarouselProvider>
);
};

export default Carousel;

I den här koden kan du se att CarouselProvider-komponenten definierar de allmänna inställningarna för karusellen som naturalSlideWidth, naturalSlideHeight och totalSlides.

Slider-komponenten innehåller flera Slide-instanser. Slide-komponenten definierar varje enskild bild.

Slutligen hanterar komponenterna ButtonBack och ButtonNext karusellnavigering.

reagera app med karuseller med hjälp av paket

Det finns många fördelar med att använda pure-react-carousel-biblioteket som:

  • Lätt att använda: Medan den inbyggda metoden kräver mer kod för att skapa en karusell, erbjuder biblioteket ett enklare sätt att skapa en karusell i React.js.
  • Mottaglig: Biblioteket ger möjlighet att skapa responsiva karuseller. Med den inbyggda metoden skulle du behöva skapa en separat karusell för olika skärmstorlekar.
  • Anpassning: Biblioteket tillhandahåller många funktioner som du kan använda för att anpassa karusellen, såsom autoplay, navigeringspilar, sidnumrering och mer.

Den sista metoden för att skapa en karusell i React.js är react-responsive-carousel-biblioteket. Med detta bibliotek kan du skapa en karusell med hjälp av komponenter. För att använda biblioteket måste du först installera det med kommandot:

npm install react-responsive-carousel

När du har installerat biblioteket kan du använda komponenten för att skapa en karusell. Här är ett exempel på hur man använder karusellkomponenten:

import React from 'react';
import { Carousel } from 'react-responsive-carousel';
import 'react-responsive-carousel/lib/styles/carousel.min.css';

const CarouselPage = () => {
return (
<Carousel>
<div>
<img src="https://placehold.co/100x100" />
<p className="legend">Legend 1</p>
</div>
<div>
<img src="https://placehold.co/200x200" />
<p className="legend">Legend 2</p>
</div>
<div>
<img src="https://placehold.co/300x300" />
<p className="legend">Legend 3</p>
</div>
</Carousel>
);
};

export default CarouselPage;

I den här koden kan du se att karusellkomponenten definierar karusellen. Inuti karusellkomponenten innehåller en div varje enskild bild. Varje bild kan innehålla en bild såväl som en förklaring för den bilden. Biblioteket erbjuder också en rad alternativ och inställningar som du kan använda för att anpassa karusellen.

reagera app med karuseller med hjälp av paket

Det finns många fördelar med att använda react-responsive-carousel-biblioteket som:

  • Ett av de mest populära biblioteken: Biblioteket är ett av de mest populära biblioteken för att skapa karuseller i React.js. Så om du har fastnat kan du enkelt hitta hjälp från samhället.
  • Lätt att använda: Med bara några rader kod kan du enkelt skapa en karusell.
  • Mottaglig: Biblioteket ger möjlighet att skapa responsiva karuseller.
  • Anpassning: Biblioteket har också många funktioner som du kan använda för att anpassa och styla karusellerna.

Med en karusell kan du ge mer information till användarna och hjälpa dem att lättare interagera med din webbplats. Karuseller hjälper också till att hålla sidan organiserad och visuellt tilltalande. Som ett resultat är det ett utmärkt sätt att förbättra användarupplevelsen.

hur man skickar ett anonymt mejl

Du kan också spåra användarinteraktion med dina karuseller och använda data för att optimera användarupplevelsen. Detta kommer att hjälpa dig att skapa en bättre användarupplevelse på din webbplats. Efter det kan du distribuera din React-applikation gratis på plattformar som Github-sidor vilket är enkelt och kostnadseffektivt.