JAVASCRIPT

carousel react

import React from 'react';
import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } from 'pure-react-carousel';
import 'pure-react-carousel/dist/react-carousel.es.css';

export default class extends React.Component {
  render() {
    return (
      <CarouselProvider
        naturalSlideWidth={100}
        naturalSlideHeight={125}
        totalSlides={3}
      >
        <Slider>
          <Slide index={0}>I am the first Slide.</Slide>
          <Slide index={1}>I am the second Slide.</Slide>
          <Slide index={2}>I am the third Slide.</Slide>
        </Slider>
        <ButtonBack>Back</ButtonBack>
        <ButtonNext>Next</ButtonNext>
      </CarouselProvider>
    );
  }
}

react carousel

//for creating Responsive Carousel in react by bootsrap is coding down below
//but first you need to install the react bootstrap by below commands
//npm i react-bootstrap bootstrap
//or use command below
//yarn add react-bootstrap bootstrap
//carousel Code is down below
import React from 'react';
import 'bootstrap/dist/js/bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import {Carousel} from "react-bootstrap";
const MyComponent = () => {
    return (
        <div>
            <Carousel fade>
                <Carousel.Item>
                    <img
                     src={'https://images.pexels.com/photos/414102/pexels-photo-414102.jpeg?cs=srgb&dl=pexels-pixabay-414102.jpg&fm=jpg'}
                     className={'d-block w-100'}
                     alt={'image'}
                    />
                  <Carousel.Caption>
                      <h3>This is a beautiful image</h3>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
                  </Carousel.Caption>
                </Carousel.Item>
                <Carousel.Item>
                    <img
                    src={'https://images.unsplash.com/photo-1618588507085-c79565432917?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8YmVhdXRpZnVsJTIwbmF0dXJlfGVufDB8fDB8fA%3D%3D&w=1000&q=80'}
                    alt={'image'}
                    className={'d-block w-100'}

                    />
                    <Carousel.Caption>
                        <h3>This is another most fancy a</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
                    </Carousel.Caption>
                </Carousel.Item>
                <Carousel.Item>
                    <img
                        src={'https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q='}
                        alt={'image'}
                        className={'d-block w-100'}
                    />
                    <Carousel.Caption>
                        <h3>This is another Beautiful Image</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
                    </Carousel.Caption>
                </Carousel.Item>
            </Carousel>

        </div>
    );
};

export default MyComponent;

react carousel

import React, { useEffect, useRef } from "react";

// No packages needed. I use tailwind CSS, but it's not required.
const MyComponent = ({}) => {
  const [activeIndex, setActiveIndex] = React.useState(0);
  const carouselReference = useRef(null);
  useInterval(() => {
    setActiveIndex((activeIndex + 1) % 4);
    if (!!carouselReference && !!carouselReference.current) {
      const width = carouselReference.current.offsetWidth;
      carouselReference.current.scrollTo(width * activeIndex, 0);
    }
  }, 2000);
  
  return (
    <div className="w-full aspect-video text-center overflow-hidden h-full">
      <div ref={carouselReference} className="flex overflow-x-auto snap-x scroll-smooth h-full rounded-xl">
		<div className={"snap-start w-full h-full aspect-video object-cover bg-blue-100"} />
		<div className={"snap-start w-full h-full aspect-video object-cover bg-blue-100"} />
      </div>
	</div>
  );
};

export const useInterval = (callback, delay) => {
  const savedCallback = useRef();

  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  useEffect(() => {
    const tick = () => {
      savedCallback.current();
    };
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
};