CODEWITHSUNDEEP
javascriptreactjs
Andrew
Andrew

Reputation: 622

How to add Custom buttons group outside slider React.js

I work with react-multi-carousel, and i try to create cusstom button outside slider, but when i create custom buttons, i have some errors:

enter image description here

I use this code:

import React from "react";
import "./Cards.css";
import Carousel from "react-multi-carousel";
import classes from "./CarouselCards.module.css"
import ProductionCards from "./ProductionCards/ProductionCards.jsx"

const responsive = {
  desktop: {
    breakpoint: { max: 3000, min: 1024 },
    items: 4,
    paritialVisibilityGutter: 140
  },
  tablet: {
    breakpoint: { max: 1024, min: 464 },
    items: 2,
    paritialVisibilityGutter: 50
  }
};

const ButtonGroup = ({ next, previous, goToSlide, ...rest }) => {
  const { carouselState: { currentSlide } } = rest;
  return (
    <div className="carousel-button-group"> // remember to give it position:absolute
      <ButtonOne className={currentSlide === 0 ? 'disable' : ''} onClick={() => previous()} />
      <ButtonTwo onClick={() => next()} />
      <ButtonThree onClick={() => goToSlide(currentSlide + 1)}> Go to any slide </ButtonThree>
    </div>
  );
};

const CarouselTabs = ({ data }) => {
  return (
    <Carousel
      ssr
      itemClass="image-item"
      responsive={responsive}
      className={classes.card}
      minimumTouchDrag={80}
      infinite={true}
      rrows={false} renderButtonGroupOutside={true} customButtonGroup={<ButtonGroup />}
    >
      {data.map(item => <ProductionCards product={item} />)}
    </Carousel>
  );
};

export default CarouselTabs;

How i can fix this issues and have buttons outside slider?

Upvotes: 0

Views: 2210

Answers (1)

Nithish
Nithish

Reputation: 5999

From the error it is evident that you haven't defined ButtonOne, ButtonTwo & ButtonThree anywhere but they are being used.

From the documentation of react-multi-carousel we can customise the dots or arrows and can be customised by providing a custom component as a prop customButtonGroup.

In your implementation a custom button group is provided but the components(ButtonOne, ButtonTwo & ButtonThree) used inside are never declared.

So, you can define a custom button group something like below

const CustomButtonGroup = ({ next, previous, goToSlide, carouselState }) => {
  const { totalItems, currentSlide } = carouselState;
  return (
    <div className="custom-button-group">
      <div>Current slide is {currentSlide}</div>
      <button onClick={() => previous()}>Previous slide</button>
      <button onClick={() => next()}>Next slide</button>
      <button
        onClick={() => goToSlide(Math.floor(Math.random() * totalItems + 1))}
      >
        Go to a random slide
      </button>
    </div>
  );
};

The above example is directly taken from react-multi-carousel stories, and can be modified as per the need.

I have created a sample sandbox below is the link

Edit react-multi-carousel

Upvotes: 1

Related Questions