How to customize arrows and enable autoPlay

[kevinorin]

I'm testing this plugin to see if it will work for my GOAL IMAGE as mocked up. So far it's

1. CUSTOMIZE ARROWS: I see the ability to enable showArrows to true but where is this code to be customized? I managed to hack this by applying my image asset using CSS but is there a way to customize with parameters?

I also used CSS with !important to position the cards but the transition is janky.

2. SET AUTOPLAY: Is autoPlay included in the package? I tried autoPlay={true} with no success

GOAL IMAGE

CURRENT PROGRESS IMAGE

https://www.loom.com/share/794d035ac9eb438cba7f6aeb40317fc4

[Agrove-Dev]

Hello, very nice, however how did you manage to replace the default arrow image? I have the same problem myself, I tried to modify this by adding my own arrow in the css, but it is added below the default one

[gutiguy]

You can use the goToSlide prop to implement your own navigation as well as autoplay. Here's a very basic example of how you might do that:

import Carousel from "react-spring-3d-carousel";
import uuidv4 from "uuid";
import { config } from "react-spring";

const slides = [
  {
    key: uuidv4(),
    content: <img src="https://picsum.photos/800/801/?random" alt="1" />
  },
  {
    key: uuidv4(),
    content: <img src="https://picsum.photos/800/802/?random" alt="2" />
  },
  {
    key: uuidv4(),
    content: <img src="https://picsum.photos/600/803/?random" alt="3" />
  },
  {
    key: uuidv4(),
    content: <img src="https://picsum.photos/800/500/?random" alt="4" />
  },
  {
    key: uuidv4(),
    content: <img src="https://picsum.photos/800/804/?random" alt="5" />
  },
  {
    key: uuidv4(),
    content: <img src="https://picsum.photos/500/800/?random" alt="6" />
  },
  {
    key: uuidv4(),
    content: <img src="https://picsum.photos/800/600/?random" alt="7" />
  },
  {
    key: uuidv4(),
    content: <img src="https://picsum.photos/805/800/?random" alt="8" />
  }
];

const Example = () => {
  const [index, setIndex] = useState(0);
  const [isAutoplayed, setIsAutoplayed] = useState(false);
  const autoPlayRef = useRef();

  useEffect(() => {
    clearInterval(autoPlayRef.current);
    if (isAutoplayed) {
      autoPlayRef.current = setInterval(() => {
        setIndex((index) => index + 1);
      }, 1000);
    }
    return () => clearInterval(autoPlayRef.current);
  }, [isAutoplayed]);

  return (
    <div style={{ width: "80%", height: "500px", margin: "0 auto" }}>
      <Carousel
        slides={slides}
        goToSlide={index}
        offsetRadius={5}
        animationConfig={config.gentle}
      />
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          marginTop: "16px"
        }}
      >
        <span
          style={{ cursor: "pointer" }}
          onClick={() => {
            setIndex(index - 1);
          }}
        >{`<< Prev <<`}</span>
        <div>
          <label for="autoplay">Autoplay?</label>
          <input
            id="autoplay"
            type="checkbox"
            checked={isAutoplayed}
            onChange={() => {
              setIsAutoplayed(!isAutoplayed);
            }}
          />{" "}
        </div>
        <span
          style={{ cursor: "pointer" }}
          onClick={() => {
            setIndex(index + 1);
          }}
        >{`>> Next >>`}</span>
      </div>
    </div>
  );
};

export default Example;

For transformations, you should be able to use the offsetFn prop to inject them per slide in relation to its offset from the center without relying on important!. If this prop doesn't help achieve your needs, I'll be happy to look at what you've tried so far. It might be a specific implementation issue, but if not, then I can look into making the API flexible enough to allow for what you need.

I hope this comment has been helpful.