Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

React.js е популярна и мощна JavaScript библиотека за създаване на потребителски интерфейси. Можете да го използвате за изграждане на динамични, интерактивни и отзивчиви уеб приложения.

Един от често срещаните компоненти, които може да използвате с React.js, е въртележката. Лесно е да се направи или с вградени функции на React, или с помощта на библиотека на трета страна.

Какво е въртележка и какви са нейните приложения?

Въртележката е компонент за слайдшоу, който ви позволява да преминавате през изображения или видеоклипове. Най-често се използва в уебсайтове за представяне на продукти или услуги или за представяне на представено съдържание. Има много предимства от използването на въртележка, като например:

  • Това е ефективен начин да привлечете вниманието към важно съдържание.
  • Това е чудесен начин да покажете множество изображения и видеоклипове.
    • instagram viewer
  • Помага да поддържате страницата организирана и визуално привлекателна.
  • Можете да го използвате, за да създадете интерактивно потребителско изживяване.

Как да създадете въртележка в React.js

Създаването на въртележка в React.js е сравнително лесно и има две популярни библиотеки, които можете да използвате. Можете също да използвате вградени функции на React, за да добавите въртележка.

Използване на вградени функции

Първият метод за създаване на въртележка в React.js е да се използват вградени функции. React предоставя мощен начин за създаване на въртележка чрез използване на компоненти. Можеш използвайте куки React за добавяне и управление на въртележка.

импортиране Реагирайте, {useState} от 'реагира';

конст Въртележка = () => {
конст [индекс, setIndex] = useState(0);
конст дължина = 3;

конст handlePrevious = () => {
конст newIndex = индекс - 1;
setIndex (нов индекс < 0? дължина - 1: newIndex);
};

конст handleNext = () => {
конст новИндекс = индекс + 1;
setIndex (нов индекс >= дължина? 0: новИндекс);
};

връщане (
<div className="въртележка">
<бутон onClick={handlePrevious}>Предишен</button>
<бутон onClick={handleNext}>Следващия</button>
<стр>{index}</стр>
</div>
);
};

износпо подразбиране Въртележка;

Този код използва куката useState, за да създаде променлива на състоянието, наречена index. Това ще следи текущата позиция във въртележката.

Функциите handlePrevious и handleNext се грижат за актуализациите на стойността на индекса, когато потребителят кликне върху Предишен и Следващия бутони.

И накрая, маркирането показва стойността на индекса в таг на параграф. Можете да показвате изображения или видеоклипове вместо текст, ако желаете. Можете също да стилизирате въртележката, като използвате нормален CSS или използвайки CSS рамка като Tailwind CSS.

Без никакво изискано оформяне, трябва да видите основна двойка бутони и число, представляващо текущия индекс:

Използване на библиотеката pure-react-carousel

Вторият метод за създаване на въртележка в React.js е библиотеката pure-react-carousel. Тази библиотека предоставя мощен начин за създаване на въртележка с помощта на компоненти. За да използвате библиотеката, първо трябва да я инсталирате с помощта на командата:

npm Инсталирай pure-react-carousel

След като инсталирате библиотеката, можете да използвате компонента, за да създадете въртележка. Ето пример за това как да използвате компонента Carousel:

импортиране Реагирайте от 'реагира';
импортиране { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } от 'pure-react-carousel';
импортиране 'pure-react-carousel/dist/react-carousel.es.css';

конст Въртележка = () => {
връщане (
<CarouselProvider
naturalSlideWidth={100}
naturalSlideHeight={120}
totalSlides={3}
>
<Плъзгач>
<Индекс на слайда={0}>Слайд 1</Slide>
<Индекс на слайда={1}>Слайд 2</Slide>
<Индекс на слайд={2}>Слайд 3</Slide>
</Slider>
<ButtonBack>обратно</ButtonBack>
<Бутон Напред>Следващия</ButtonNext>
</CarouselProvider>
);
};

износпо подразбиране Въртележка;

В този код можете да видите, че компонентът CarouselProvider дефинира общите настройки за въртележката, като naturalSlideWidth, naturalSlideHeight и totalSlides.

Компонентът Slider съдържа няколко екземпляра на Slide. Компонентът Slide дефинира всеки отделен слайд.

И накрая, компонентите ButtonBack и ButtonNext управляват навигацията с въртележка.

Има много предимства от използването на библиотеката pure-react-carousel, като например:

  • Лесен за използване: Докато вграденият метод изисква повече код за създаване на въртележка, библиотеката предоставя по-лесен начин за създаване на въртележка в React.js.
  • Отзивчив: Библиотеката предоставя възможност за създаване на адаптивни въртележки. С вградения метод ще трябва да създадете отделна въртележка за различни размери на екрана.
  • Персонализиране: Библиотеката предоставя много функции, които можете да използвате, за да персонализирате въртележката, като автоматично възпроизвеждане, стрелки за навигация, страници и други.

Използване на библиотеката react-responsive-carousel

Последният метод за създаване на въртележка в React.js е библиотеката react-responsive-carousel. С тази библиотека можете да създадете въртележка с помощта на компоненти. За да използвате библиотеката, първо трябва да я инсталирате с помощта на командата:

npm Инсталирай реагира-отзивчив-въртележка

След като инсталирате библиотеката, можете да използвате компонента, за да създадете въртележка. Ето пример как да използвате компонента Carousel:

импортиране Реагирайте от 'реагира';
импортиране { Въртележка } от „реагиране-отзивчив-въртележка“;
импортиране 'react-responsive-carousel/lib/styles/carousel.min.css';

конст CarouselPage = () => {
връщане (
<Въртележка>
<див>
<img src="https://placehold.co/100x100" />
<p className="легенда">Легенда 1</стр>
</div>
<див>
<img src="https://placehold.co/200x200" />
<p className="легенда">Легенда 2</стр>
</div>
<див>
<img src="https://placehold.co/300x300" />
<p className="легенда">Легенда 3</стр>
</div>
</Carousel>
);
};

износпо подразбиране CarouselPage;

В този код можете да видите, че компонентът Carousel дефинира въртележката. Вътре в компонента Carousel, div съдържа всеки отделен слайд. Всеки слайд може да съдържа изображение, както и легенда за това изображение. Библиотеката също така предоставя набор от опции и настройки, които можете да използвате, за да персонализирате въртележката.

Има много предимства от използването на библиотеката react-responsive-carousel, като например:

  • Една от най-популярните библиотеки: Библиотеката е една от най-популярните библиотеки за създаване на въртележки в React.js. Така че, ако сте се затруднили, можете лесно да намерите помощ от общността.
  • Лесен за използване: Само с няколко реда код можете лесно да създадете въртележка.
  • Отзивчив: Библиотеката предоставя възможност за създаване на адаптивни въртележки.
  • Персонализиране: Библиотеката също така предоставя много функции, които можете да използвате, за да персонализирате и стилизирате въртележките.

Подобрете потребителското изживяване с въртележка

С въртележка можете да предоставите повече информация на потребителите и да им помогнете да взаимодействат по-лесно с вашия уебсайт. Въртележките също помагат страницата да бъде организирана и визуално привлекателна. В резултат на това това е чудесен начин за подобряване на потребителското изживяване.

Можете също така да проследявате взаимодействието на потребителите с вашите въртележки и да използвате данните, за да оптимизирате потребителското изживяване. Това ще ви помогне да създадете по-добро потребителско изживяване на вашия уебсайт. След това можете да внедрите приложението си React безплатно на платформи като Github страници, което е лесно и рентабилно.