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

react snap carousel

saikun answered on August 9, 2021 Popularity 9/10 Helpfulness 2/10

answer react snap carousel

related react native snap carousel

react snap carousel

Comment

// react-snap-carousel npm
// Lightweight and hook based

import React from 'react';
import { useSnapCarousel } from 'react-snap-carousel';

const AdvancedCarousel = () => {
  const { scrollRef, pages, activePageIndex, next, prev, goTo } =
    useSnapCarousel();
  return (
    <>
      <ul
        ref={scrollRef}
        style={{
          display: 'flex',
          overflow: 'auto',
          scrollSnapType: 'x mandatory'
        }}
      >
        {Array.from({ length: 100 }).map((_, i) => (
          <li
            style={{
              backgroundColor: 'aqua',
              fontSize: '50px',
              width: '250px',
              height: '250px',
              flexShrink: 0,
              color: '#fff',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center'
            }}
          >
            Item {i}
          </li>
        ))}
      </ul>
      <div>
        {activePageIndex + 1} / {pages.length}
      </div>
      <button onClick={() => prev()}>Prev</button>
      <button onClick={() => next()}>Next</button>
      <ol style={{ display: 'flex' }}>
        {pages.map((_, i) => (
          <li key={i}>
            <button
              style={i === activePageIndex ? { opacity: 0.5 } : {}}
              onClick={() => goTo(i)}
            >
              {i + 1}
            </button>
          </li>
        ))}
      </ol>
    </>
  );
};

export default AdvancedCarousel;

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: www.npmjs.com

Tags: carousel javascript react-snap

Link to this answer
Share Copy Link

Contributed on Jan 06 2023

saikun

0 Answers Avg Quality 2/10

Closely Related Answers

react native snap carousel

Comment

npm i react-native-snap-carousel

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: carousel carouse

Link to this answer
Share Copy Link

Contributed on Aug 09 2021

Successful Snake

0 Answers Avg Quality 2/10

react snap carousel

Contents

More Related Answers

react snap carousel

Closely Related Answers

react native snap carousel

Grepper

Documentation

Social

Legal

Contact

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