AppCarousel

App.js

import { Heading } from '@chakra-ui/react'
import React from 'react'
import AppCarosel from '../Components/AppCarosel'

function HomePage() {
	const carosel=[
		'https://images.dusdusan.com/product/LrnsKmHO1672123889_1672123888510.jpg',
		'https://images.dusdusan.com/product/2dt3Y3an1671097073_1671097073736.jpg',
		'https://images.dusdusan.com/product/dnynjaPf1671096833_1671096833774.jpg'
	]
  return (
  	<>
		
		<AppCarosel images={carosel}/>
		<Heading>Ini apa ya?</Heading>
	</>  
	)
}

export default HomePage

Components/AppCarosel.jsx

import React, { useState } from 'react'
import 'keen-slider/keen-slider.min.css'
import { useKeenSlider } from 'keen-slider/react' 
import { Image } from '@chakra-ui/react'
import "./AppCarosel.css"

function AppCarosel(props) {
	const [currentSlide, setCurrentSlide] = useState(0)
	const [loaded, setLoaded] = useState(false)

	const [sliderRef, instanceRef] = useKeenSlider(
    { 
		initial: 0,
		loop: true,
      	slideChanged(slider) {
			// console.log('slide changed')
			setCurrentSlide(slider.track.details.rel)
		},
		created() {
			setLoaded(true)
		  },

    },
    [
      // add plugins here
    ]
  )

  function Arrow(props) {
	const disabeld = props.disabled ? " arrow--disabled" : ""
	return (
	  <svg
		onClick={props.onClick}
		className={`arrow ${
		  props.left ? "arrow--left" : "arrow--right"
		} ${disabeld}`}
		xmlns="http://www.w3.org/2000/svg"
		viewBox="0 0 24 24"
	  >
		{props.left && (
		  <path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z" />
		)}
		{!props.left && (
		  <path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z" />
		)}
	  </svg>
	)
  }
  return (<>
	<div className="navigation-wrapper">
	<div ref={sliderRef} className="keen-slider">
		{props.images.map((x)=><div className="keen-slider__slide"><Image src={x}/></div>)}
    </div>
	{loaded && instanceRef.current && (
          <>
            <Arrow
              left
              onClick={(e) =>
                e.stopPropagation() || instanceRef.current?.prev()
              }
              disabled={currentSlide === 0}
            />

            <Arrow
              onClick={(e) =>
                e.stopPropagation() || instanceRef.current?.next()
              }
              disabled={
                currentSlide ===
                instanceRef.current.track.details.slides.length - 1
              }
            />
          </>
        )}
      </div>
	  {loaded && instanceRef.current && (
        <div className="dots">
          {[
            ...Array(instanceRef.current.track.details.slides.length).keys(),
          ].map((idx) => {
            return (
              <button
                key={idx}
                onClick={() => {
                  instanceRef.current?.moveToIdx(idx)
                }}
                className={"dot" + (currentSlide === idx ? " active" : "")}
              ></button>
            )
          })}
        </div>
      )}
	  </>
  )
}

export default AppCarosel

Components/AppCarosel.css

body {
	margin: 0;
	font-family: "Inter", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  }
  
  [class^="number-slide"],
  [class*=" number-slide"] {
	background: grey;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 50px;
	color: #fff;
	font-weight: 500;
	height: 300px;
	max-height: 100vh;
  }
  
  .number-slide1 {
	background: rgb(64, 175, 255);
	background: linear-gradient(
	  128deg,
	  rgba(64, 175, 255, 1) 0%,
	  rgba(63, 97, 255, 1) 100%
	);
  }
  
  .number-slide2 {
	background: rgb(255, 75, 64);
	background: linear-gradient(
	  128deg,
	  rgba(255, 154, 63, 1) 0%,
	  rgba(255, 75, 64, 1) 100%
	);
  }
  
  .number-slide3 {
	background: rgb(182, 255, 64);
	background: linear-gradient(
	  128deg,
	  rgba(182, 255, 64, 1) 0%,
	  rgba(63, 255, 71, 1) 100%
	);
	background: linear-gradient(
	  128deg,
	  rgba(189, 255, 83, 1) 0%,
	  rgba(43, 250, 82, 1) 100%
	);
  }
  
  .number-slide4 {
	background: rgb(64, 255, 242);
	background: linear-gradient(
	  128deg,
	  rgba(64, 255, 242, 1) 0%,
	  rgba(63, 188, 255, 1) 100%
	);
  }
  
  .number-slide5 {
	background: rgb(255, 64, 156);
	background: linear-gradient(
	  128deg,
	  rgba(255, 64, 156, 1) 0%,
	  rgba(255, 63, 63, 1) 100%
	);
  }
  .number-slide6 {
	background: rgb(64, 76, 255);
	background: linear-gradient(
	  128deg,
	  rgba(64, 76, 255, 1) 0%,
	  rgba(174, 63, 255, 1) 100%
	);
  }
  
  .navigation-wrapper {
	position: relative;
  }
  
  .dots {
	display: flex;
	padding: 10px 0;
	justify-content: center;
  }
  
  .dot {
	border: none;
	width: 10px;
	height: 10px;
	background: #c5c5c5;
	border-radius: 50%;
	margin: 0 5px;
	padding: 5px;
	cursor: pointer;
  }
  
  .dot:focus {
	outline: none;
  }
  
  .dot.active {
	background: #000;
  }
  
  .arrow {
	width: 30px;
	height: 30px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	fill: #fff;
	cursor: pointer;
  }
  
  .arrow--left {
	left: 5px;
  }
  
  .arrow--right {
	left: auto;
	right: 5px;
  }
  
  .arrow--disabled {
	fill: rgba(255, 255, 255, 0.5);
  }