Breaking News: Grepper is joining You.com. Read the official announcement!

react responsive carousel with custom arrow and multiple slides

Shirshak Kandel answered on September 7, 2022 Popularity 4/10 Helpfulness 2/10

answer react responsive carousel with custom arrow and multiple slides

react responsive carousel with custom arrow and multiple slides

Comment

  const { currentSlide, updateCurrentSlide, setCurrentSlide } = CarouselLogic();
  return (
    <section className="mt-element">
      <Carousel
        selectedItem={currentSlide}
        infiniteLoop={false}
        centerMode={false}
        showArrows={false}
        showIndicators={false}
        showThumbs={false}
        showStatus={false}
        stopOnHover={false}
        onChange={updateCurrentSlide}
      >
        <SingleCarousel />
        <SingleCarousel />
        <SingleCarousel />
        <SingleCarousel />
      </Carousel>

      <CarouselControl setCurrentSlide={setCurrentSlide} />
        
//CarouselLogic.tsx
        import React, { useState } from 'react';

const CarouselLogic = () => {
  const [currentSlide, setCurrentSlide] = useState(0);

  const updateCurrentSlide = index => {
    if (currentSlide !== index) {
      setCurrentSlide(index);
    }
  };
  return { currentSlide, updateCurrentSlide, setCurrentSlide };
};

export default CarouselLogic;

Popularity 4/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript react-responsive-carousel

Link to this answer
Share Copy Link

Contributed on Sep 07 2022

Shirshak Kandel

0 Answers Avg Quality 2/10

react responsive carousel with custom arrow and multiple slides

Contents

More Related Answers

react responsive carousel with custom arrow and multiple slides

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.