<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.