Breaking News: Grepper is joining You.com. Read the official announcement!

React Simple Carousel

Add Answer

ZAHIDIOT answered on November 20, 2021 Popularity 10/10 Helpfulness 2/10

answer React Simple Carousel

related carousel react

related react carousel

React Simple Carousel

Comment

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;

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: npm.io

Tags: carousel javascript

Link to this answer
Share Copy Link

Contributed on May 13 2023

ZAHIDIOT

0 Answers Avg Quality 2/10

Closely Related Answers

carousel react

Comment

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>
    );
  }
}

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: www.npmjs.com

Tags: carousel carouse

Link to this answer
Share Copy Link

Contributed on Nov 20 2021

Jittery Jellyfish

0 Answers Avg Quality 2/10

react carousel

Comment

//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;

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: www.github.com

Tags: carousel carouse

Link to this answer
Share Copy Link

Contributed on May 09 2022

hussein asadi

0 Answers Avg Quality 2/10

react carousel

Comment

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]);
};

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: carousel carouse

Link to this answer
Share Copy Link

Contributed on Aug 15 2022

calderwoodra

0 Answers Avg Quality 2/10

React Simple Carousel

Contents

More Related Answers

React Simple Carousel

Closely Related Answers

carousel react

react carousel

react carousel

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.