visual-e/src/components/slider.js

Visual E npm package

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import '../styles/framework.css';

const Slider = ({ images }) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  const handleNext = () => {
    setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
  };


  return (
    <>
    <div className='slider-container'> 
    <div className="">
      <img src={images[currentIndex]} alt={`${currentIndex + 1}`} className="slider-image"/>
    </div>

    <div class="">
      <button onClick={handleNext} className="slider-button tab-txt-size-3sm smt-txt-size-1sm b-none round-full">→</button>
    </div>

    </div>   
    </>
  );
};

Slider.propTypes = {
  images: PropTypes.arrayOf(PropTypes.string).isRequired,
};

export default Slider;