Paano Gumawa ng Interactive Carousel sa React.js

Paano Gumawa ng Interactive Carousel sa React.js
Ang mga mambabasang tulad mo ay tumutulong sa pagsuporta sa MUO. Kapag bumili ka gamit ang mga link sa aming site, maaari kaming makakuha ng isang affiliate na komisyon. Magbasa pa.

Ang React.js ay isang sikat at makapangyarihang JavaScript library para sa paglikha ng mga user interface. Magagamit mo ito upang bumuo ng mga dynamic, interactive, at tumutugon na web application.





Ang isa sa mga karaniwang bahagi na maaari mong gamitin sa React.js ay ang carousel. Madaling gawin ito, alinman sa mga built-in na feature ng React o gamit ang isang third-party na library.



MAKEUSEOF VIDEO OF THE DAY

Ang carousel ay isang bahagi ng slideshow na nagbibigay-daan sa iyong umikot sa mga larawan o video. Ito ay pinakakaraniwang ginagamit sa mga website upang ipakita ang mga produkto o serbisyo o upang ipakita ang itinatampok na nilalaman. Maraming benepisyo ang paggamit ng carousel, gaya ng:





kung paano makahanap ng mga damit na nakikita sa mga palabas sa tv
  • Ito ay isang epektibong paraan upang maakit ang pansin sa mahalagang nilalaman.
  • Ito ay isang mahusay na paraan upang ipakita ang maraming mga larawan at video.
  • Nakakatulong itong panatilihing organisado at kaakit-akit ang pahina.
  • Magagamit mo ito upang lumikha ng interactive na karanasan ng user.

Ang paggawa ng carousel sa React.js ay medyo madali at mayroong dalawang sikat na library na magagamit mo. Maaari mo ring gamitin ang mga built-in na feature ng React para magdagdag ng carousel.

Paggamit ng Mga Built-In na Feature

Ang unang paraan ng paggawa ng carousel sa React.js ay ang paggamit ng mga built-in na feature. Nagbibigay ang React ng isang mahusay na paraan upang gumawa ng carousel sa pamamagitan ng paggamit ng mga bahagi. Kaya mo gumamit ng React hooks para magdagdag at magkontrol ng carousel.



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;

Ginagamit ng code na ito ang useState hook upang lumikha ng variable ng estado na tinatawag na index. Susubaybayan nito ang kasalukuyang posisyon sa carousel.

Ang handlePrevious at handleNext function ay nangangalaga sa mga update sa index value kapag nag-click ang user sa Nakaraang at Susunod mga pindutan.



Panghuli, ipinapakita ng markup ang halaga ng index sa isang tag ng talata. Maaari kang magpakita ng mga larawan o video sa halip na teksto kung gusto mo. Maaari mo ring i-istilo ang carousel gamit ang normal na CSS o gamit ang isang CSS framework tulad ng Tailwind CSS .

Nang walang anumang magarbong estilo, dapat mong makita ang isang pangunahing pares ng mga pindutan at isang numero na kumakatawan sa kasalukuyang index:



react app na may mga carousel gamit ang mga in-built na feature

Ang pangalawang paraan ng paggawa ng carousel sa React.js ay ang pure-react-carousel library. Nagbibigay ang library na ito ng mahusay na paraan para gumawa ng carousel gamit ang mga bahagi. Upang magamit ang library, kailangan mo munang i-install ito gamit ang command:

npm install pure-react-carousel

Kapag na-install mo na ang library, maaari mong gamitin ang component para gumawa ng carousel. Narito ang isang halimbawa ng kung paano gamitin ang bahagi ng Carousel:

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;

Sa code na ito, makikita mo na ang bahagi ng CarouselProvider ay tumutukoy sa mga pangkalahatang setting para sa carousel gaya ng naturalSlideWidth, naturalSlideHeight, at totalSlides.

ilipat ang windows 10 lisensya sa bagong computer

Ang bahagi ng Slider ay naglalaman ng ilang mga paglitaw ng Slide. Ang Slide component ay tumutukoy sa bawat indibidwal na slide.

Panghuli, pinangangasiwaan ng mga bahagi ng ButtonBack at ButtonNext ang carousel navigation.

react app na may carousels gamit ang package

Maraming benepisyo ang paggamit ng pure-react-carousel library gaya ng:

  • Madaling gamitin: Bagama't ang built-in na paraan ay nangangailangan ng higit pang code para gumawa ng carousel, ang library ay nagbibigay ng mas madaling paraan para gumawa ng carousel sa React.js.
  • Tumutugon: Nagbibigay ang library ng kakayahang lumikha ng mga tumutugong carousel. Gamit ang built-in na paraan, kailangan mong gumawa ng hiwalay na carousel para sa iba't ibang laki ng screen.
  • Pag-customize: Nagbibigay ang library ng maraming feature na magagamit mo para i-customize ang carousel gaya ng autoplay, navigation arrow, pagination, at higit pa.

Ang huling paraan ng paggawa ng carousel sa React.js ay ang react-responsive-carousel library. Gamit ang library na ito, maaari kang lumikha ng isang carousel gamit ang mga bahagi. Upang magamit ang library, kailangan mo munang i-install ito gamit ang command:

kung gaano karaming mga antas sa mga kaibigan ng crush ng kendi
npm install react-responsive-carousel

Kapag na-install mo na ang library, maaari mong gamitin ang component para gumawa ng carousel. Narito ang isang halimbawa kung paano gamitin ang bahagi ng Carousel:

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;

Sa code na ito, makikita mo na ang bahagi ng Carousel ay tumutukoy sa carousel. Sa loob ng bahagi ng Carousel, naglalaman ang isang div ng bawat indibidwal na slide. Ang bawat slide ay maaaring maglaman ng isang imahe pati na rin ang isang alamat para sa larawang iyon. Nagbibigay din ang library ng hanay ng mga opsyon at setting na magagamit mo para i-customize ang carousel.

react app na may carousels gamit ang package

Maraming benepisyo ang paggamit ng react-responsive-carousel library gaya ng:

  • Isa sa mga pinakasikat na aklatan: Ang library ay isa sa mga pinakasikat na library para sa paggawa ng mga carousel sa React.js. Kaya, kung natigil ka, madali kang makakahanap ng tulong mula sa komunidad.
  • Madaling gamitin: Sa ilang linya lang ng code, madali kang makakagawa ng carousel.
  • Tumutugon: Nagbibigay ang library ng kakayahang lumikha ng mga tumutugong carousel.
  • Pag-customize: Nagbibigay din ang library ng maraming feature na magagamit mo para i-customize at i-istilo ang mga carousel.

Sa isang carousel, maaari kang magbigay ng higit pang impormasyon sa mga user at tulungan silang makipag-ugnayan sa iyong website nang mas madali. Nakakatulong din ang mga carousel na panatilihing maayos at kaakit-akit ang page. Bilang resulta, ito ay isang mahusay na paraan upang mapabuti ang karanasan ng user.

Maaari mo ring subaybayan ang pakikipag-ugnayan ng user sa iyong mga carousel at gamitin ang data para i-optimize ang karanasan ng user. Makakatulong ito sa iyo na lumikha ng mas magandang karanasan ng user sa iyong website. Pagkatapos nito, maaari mong i-deploy ang iyong React application nang libre sa mga platform tulad ng Github page na madali at cost-effective.