Componente de carrusel ReactJS Reactstrap

Posted on by Rudeus Greyrat

Reactstrap es una biblioteca front-end popular que es fácil de usar con componentes React Bootstrap 4. Esta biblioteca contiene los componentes de React sin estado para Bootstrap 4. Podemos usar el siguiente enfoque en ReactJS para usar el componente de carrusel de ReactJS Reactstrap.

Accesorios de carrusel:

  • activeIndex: se utiliza para controlar la diapositiva visible activa actual.
  • siguiente: es una función de devolución de llamada que se activa cuando se hace clic en el botón siguiente.
  • anterior: es una función de devolución de llamada que se activa cuando se hace clic en el botón anterior.
  • teclado: Se utiliza para indicar si el carrusel debe reaccionar al evento del teclado o no.
  • pausa: se usa para pausar la diapositiva en función de diferentes eventos del mouse.
  • paseo: se utiliza para reproducir automáticamente el carrusel después de que el usuario cicla manualmente el primer elemento.
  • Intervalo: se utiliza para retrasar el tiempo entre el movimiento cíclico automático de estos elementos.
  • children: Se utiliza para pasar el elemento children a este componente.
  • mouseEnter: es una función de devolución de llamada que se activa cuando el mouse ingresa al carrusel.
  • mouseLeave: es una función de devolución de llamada que se activa cuando el mouse sale del carrusel.
  • diapositiva: Se utiliza para habilitar la animación entre diapositivas.
  • cssModule: se utiliza para indicar el módulo CSS para el estilo.
  • enableTouch: Se utiliza para indicar si los gestos táctiles en el Carrusel funcionan o no.

Elementos de carrusel:

  • etiqueta: se utiliza para indicar la etiqueta de este componente.
  • in: Se utiliza para indicar si mostrar o no un elemento.
  • cssModule: se utiliza para indicar el módulo CSS para el estilo.
  • children: Se utiliza para pasar el elemento children a este componente.
  • diapositiva: Se utiliza para habilitar la animación entre diapositivas.

Accesorios de control de carrusel:

  • dirección: Se utiliza para indicar la dirección como siguiente o anterior.
  • onClickHandler: es una función de devolución de llamada que se activa cuando se hace clic en ella.
  • cssModule: se utiliza para indicar el módulo CSS para el estilo.
  • directionText: se utiliza para indicar el texto de dirección.

Accesorios de indicadores de carrusel:

  • items: Se utiliza para denotar la array de elementos.
  • activeIndex: se utiliza para controlar la diapositiva visible activa actual.
  • cssModule: se utiliza para indicar el módulo CSS para el estilo.
  • onClickHandler: es una función de devolución de llamada que se activa cuando se hace clic en ella.

CarruselCaption Props:

  • captionHeader: se utiliza para indicar el valor del encabezado del título.
  • captionText: se utiliza para indicar el valor del texto del título.
  • cssModule: se utiliza para indicar el módulo CSS para el estilo.

Accesorios de carrusel no controlados:

  • items: Se utiliza para denotar la array de elementos.
  • indicadores: se utiliza para mostrar un conjunto de indicadores de posición de diapositivas.
  • controles : Se utiliza para indicar si tiene controles o no.
  • autoPlay: Se utiliza para indicar si se puede reproducir automáticamente o no.

Creación de la aplicación React e instalación del módulo:

  • Paso 1: Cree una aplicación React usando el siguiente comando:

    npx create-react-app foldername

  • Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

    cd foldername

  • Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

    npm install reactstrap bootstrap

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo 1: ahora escriba el siguiente código en el archivo App.js. Aquí, hemos utilizado el componente Carrusel con los botones de control del carrusel.

App.js

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import {
    CarouselControl,
    Carousel,
    CarouselItem,
    CarouselIndicators,
} from 'reactstrap';
  
function App() {
  
    // State for Active index
    const [activeIndex, setActiveIndex] = React.useState(0);
  
    // State for Animation
    const [animating, setAnimating] = React.useState(false);
  
    // Sample items for Carousel
    const items = [
        {
            caption: 'Sample Caption One',src: 
'https://media.geeksforgeeks.org/wp-content/uploads/20210425122739/2-300x115.png',
            altText: 'Slide One'
        },
        {
            caption: 'Sample Caption Two',src: 
'https://media.geeksforgeeks.org/wp-content/uploads/20210425122716/1-300x115.png',
            altText: 'Slide Two'
        }
    ];
  
    // Items array length
    const itemLength = items.length - 1
  
    // Previous button for Carousel
    const previousButton = () => {
        if (animating) return;
        const nextIndex = activeIndex === 0 ?
            itemLength : activeIndex - 1;
        setActiveIndex(nextIndex);
    }
  
    // Next button for Carousel
    const nextButton = () => {
        if (animating) return;
        const nextIndex = activeIndex === itemLength ?
            0 : activeIndex + 1;
        setActiveIndex(nextIndex);
    }
  
    // Carousel Item Data
    const carouselItemData = items.map((item) => {
        return (
            <CarouselItem
                key={item.src}
                onExited={() => setAnimating(false)}
                onExiting={() => setAnimating(true)}
            >
                <img src={item.src} alt={item.altText} />
            </CarouselItem>
        );
    });
  
    return (
        <div style={{
            display: 'block', width: 320, padding: 30
        }}>
            <h8>ReactJS Reactstrap Carousel Component</h8>
            <Carousel previous={previousButton} next={nextButton}
                activeIndex={activeIndex}>
                <CarouselIndicators items={items}
                    activeIndex={activeIndex}
                    onClickHandler={(newIndex) => {
                        if (animating) return;
                        setActiveIndex(newIndex);
                    }} />
                {carouselItemData}
                <CarouselControl directionText="Prev"
                    direction="prev" onClickHandler={previousButton} />
                <CarouselControl directionText="Next"
                    direction="next" onClickHandler={nextButton} />
            </Carousel>
        </div >
    );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Ejemplo 2: ahora escriba el siguiente código en el archivo App.js. Aquí, hemos utilizado el componente Carrusel sin los botones de control del carrusel.

App.js

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import {
    Carousel,
    CarouselItem,
    CarouselIndicators,
} from 'reactstrap';
  
function App() {
  
    // State for Active index
    const [activeIndex, setActiveIndex] = React.useState(0);
  
    // State for Animation
    const [animating, setAnimating] = React.useState(false);
  
    // Sample items for Carousel
    const items = [
        {src: 
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190603152813/ml_gaming.png',
        },
        {src: 
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190528184201/gateexam.png',
        }
    ];
  
    // Items array length
    const itemLength = items.length - 1
  
    // Previous button for Carousel
    const previousButton = () => {
        if (animating) return;
        const nextIndex = activeIndex === 0 ?
            itemLength : activeIndex - 1;
        setActiveIndex(nextIndex);
    }
  
    // Next button for Carousel
    const nextButton = () => {
        if (animating) return;
        const nextIndex = activeIndex === itemLength ?
            0 : activeIndex + 1;
        setActiveIndex(nextIndex);
    }
  
    // Carousel Item Data
    const carouselItemData = items.map((item) => {
        return (
            <CarouselItem
                key={item.src}
                onExited={() => setAnimating(false)}
                onExiting={() => setAnimating(true)}
            >
                <img src={item.src} alt={item.altText} />
            </CarouselItem>
        );
    });
  
    return (
        <div style={{
            display: 'block', padding: 30
        }}>
            <h1>ReactJS Reactstrap Carousel Component</h1>
            <Carousel previous={previousButton} next={nextButton} 
                activeIndex={activeIndex}>
                <CarouselIndicators items={items}
                    activeIndex={activeIndex}
                    onClickHandler={(newIndex) => {
                        if (animating) return;
                        setActiveIndex(newIndex);
                    }} />
                {carouselItemData}
            </Carousel>
        </div >
    );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Referencia:  https://reactstrap.github.io/components/carousel/

Publicación traducida automáticamente

Artículo escrito por gouravhammad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *