xxxxxxxxxx
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>
);
}
}
xxxxxxxxxx
//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;
xxxxxxxxxx
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]);
};
xxxxxxxxxx
import { useState } from 'react';
import ReactSimplyCarousel from 'react-simply-carousel';
function ReactSimplyCarouselExample() {
const [activeSlideIndex, setActiveSlideIndex] = useState(0);
return (
<div>
<ReactSimplyCarousel
activeSlideIndex={activeSlideIndex}
onRequestChange={setActiveSlideIndex}
itemsToShow={1}
itemsToScroll={1}
forwardBtnProps={{
//here you can also pass className, or any other button element attributes
style: {
alignSelf: 'center',
background: 'black',
border: 'none',
borderRadius: '50%',
color: 'white',
cursor: 'pointer',
fontSize: '20px',
height: 30,
lineHeight: 1,
textAlign: 'center',
width: 30,
},
children: <span>{`>`}</span>,
}}
backwardBtnProps={{
//here you can also pass className, or any other button element attributes
style: {
alignSelf: 'center',
background: 'black',
border: 'none',
borderRadius: '50%',
color: 'white',
cursor: 'pointer',
fontSize: '20px',
height: 30,
lineHeight: 1,
textAlign: 'center',
width: 30,
},
children: <span>{`<`}</span>,
}}
responsiveProps={[
{
itemsToShow: 2,
itemsToScroll: 2,
minWidth: 768,
},
]}
speed={400}
easing="linear"
>
{/* here you can also pass any other element attributes. Also, you can use your custom components as slides */}
<div style={{ width: 300, height: 300, background: '#ff80ed' }}>
slide 0
</div>
<div style={{ width: 300, height: 300, background: '#065535' }}>
slide 1
</div>
<div style={{ width: 300, height: 300, background: '#000000' }}>
slide 2
</div>
<div style={{ width: 300, height: 300, background: '#133337' }}>
slide 3
</div>
<div style={{ width: 300, height: 300, background: '#ffc0cb' }}>
slide 4
</div>
<div style={{ width: 300, height: 300, background: '#ffffff' }}>
slide 5
</div>
<div style={{ width: 300, height: 300, background: '#ffe4e1' }}>
slide 6
</div>
<div style={{ width: 300, height: 300, background: '#008080' }}>
slide 7
</div>
<div style={{ width: 300, height: 300, background: '#ff0000' }}>
slide 8
</div>
<div style={{ width: 300, height: 300, background: '#e6e6fa' }}>
slide 9
</div>
</ReactSimplyCarousel>
</div>
);
}
export default ReactSimplyCarouselExample;