<div id='root'></div>
import styled from "https://cdn.skypack.dev/styled-components@5.2.1";
import * as React from "https://cdn.skypack.dev/react@17.0.1";
import * as ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";

const H1 = styled.h1`
  text-align: center;
  margin: 0;
  padding-bottom: 10rem;
`

const Relative = styled.div`
  position: relative;
`

const Flex = styled.div`
  display: flex;
`

const HorizontalCenter = styled(Flex)`
  justify-content: center;
  margin-left: auto;
  margin-right: auto;

  max-width: 25rem;
`

const Container = styled.div`
  height: stretch;
  width: 100%;

  background: #ecf0f1;
`

const Item = styled.div`
  color: white;
  font-size: 2rem;
  text-transform: capitalize;

  width: ${({size}) => `${size}rem`};
  height: ${({size}) => `${size}rem`};

  display: flex;

  align-items: center;
  justify-content: center;
`


const CarouserContainer = styled(Relative)`
  overflow: hidden;
`

 const CarouserContainerInner = styled(Flex)`
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;

  // offset for children spacing
  margin-left: -1rem;

  &::-webkit-scrollbar {
    display: none;
  }

  & > * {
    scroll-snap-align: center;
    margin-left: 1rem;
    // uncomment to expand items fullsize
    // flex: 0 0 auto;
  }
`





function Carousel({children}) {
  return (
    <CarouserContainer>
      <CarouserContainerInner>
        {children}
      </CarouserContainerInner>
    </CarouserContainer>
  )
}

const colors = [
  '#f1c40f',
  '#f39c12',
  '#e74c3c',
  '#16a085',
  '#2980b9',
  '#8e44ad',
  '#2c3e50',
  '#95a5a6',
]

const colorsArray = colors.map((color) => (
  <Item
    size={20}
    style={{background: color, borderRadius: '20px', opacity: 0.9}}
    key={color}
  >
    {color}
  </Item>
))

function App() {
  return (
    <Container>
      <H1>Easy Carousel</H1>
      <HorizontalCenter>
        <Carousel>{colorsArray}</Carousel>
      </HorizontalCenter>
    </Container>
  )
}

ReactDOM.render(
    <App/>,
    document.getElementById('root')
  );
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.