¿Cómo puedo reemplazar los indicadores predeterminados del carrusel con imágenes?

Answer

1. 

   davy.ai

   June 11, 2023 at 10:40 am

   Para cambiar los indicadores de carrusel por imágenes de productos, puede crear un componente de paginación personalizado y pasarlo como la propiedad indicators al componente Carousel en React-bootstrap.

   Aquí hay un ejemplo de código que demuestra cómo lograr esto:

   import Carousel from 'react-bootstrap/Carousel';
   import { useState } from 'react';
   
   function CustomPagination({ items, activeIndex, onSelect }) {
     const [currentIndex, setCurrentIndex] = useState(activeIndex);
   
     const handleSelect = (selectedIndex) => {
       onSelect(selectedIndex);
       setCurrentIndex(selectedIndex);
     };
   
     return (
       <ol classname="carousel-indicators">
         {items.map((item, index) => (
           <li key="{index}" classname="{index" =="=" currentindex="" 'active'="" :="" ''}="" onclick="{()" ==""> handleSelect(index)}
           >
             <img src="{item}" alt="{`Imagen" del="" producto="" ${index="" +="" 1}`}="">
           </li>
         ))}
       </ol>
     );
   }
   
   function ProductCarousel({ product }) {
     const [activeIndex, setActiveIndex] = useState(0);
   
     const handleSelect = (selectedIndex) => {
       setActiveIndex(selectedIndex);
     };
   
     return (
       <carousel classname="productCarousel" indicators="{false}" activeindex="{activeIndex}" onselect="{handleSelect}" interval="{null}" nextlabel="" prevlabel="" nexticon=""></carousel><span aria-hidden="true" classname="carousel-control-next-icon"></span>}
         prevIcon={<span aria-hidden="true" classname="carousel-control-prev-icon"></span>}
       >
         {product.images.map((image) => (
           <carousel.item classname="carouselItem" key="{image}">
             <img classname="d-block w-100" src="{image}" alt="{product.name}">
           </carousel.item>
         ))}
         <custompagination items="{product.images}" activeindex="{activeIndex}" onselect="{handleSelect}"></custompagination>
   
     );
   }
   

   En este ejemplo, definimos un componente CustomPagination que renderiza una lista de imágenes clicables como los indicadores del carrusel. El componente toma tres props:

   • items: Un array de URLs de imágenes del producto.
   • activeIndex: El índice del elemento actualmente activo en el carrusel.
   • onSelect: Una función de retorno de llamada que actualiza el índice activo cuando se hace clic en un elemento.

   El componente ProductCarousel utiliza el componente Carousel de React-bootstrap para renderizar las imágenes del producto como un carrusel. Establecemos la propiedad indicators en false para evitar que se muestren los indicadores predeterminados.

   En su lugar, renderizamos el componente de paginación personalizado al final del carrusel, pasándole las props items, activeIndex y onSelect. El estado activeIndex se actualiza en la función handleSelect, que se pasa como la prop onSelect al componente Carousel.

   Con esta configuración, al hacer clic en una imagen del producto en el componente de paginación personalizado se actualizará el índice activo del carrusel y se mostrará la imagen del producto correspondiente.

Comments are closed.