personal-page/src/components/Carousel/Carousel.module.css
aleidk 8f15b45e9b feat(components): add carousel components
it's inmidiatly used in the image gallery
2024-02-27 21:10:39 -03:00

49 lines
591 B
CSS

.carousel {
height: 100%;
max-width: 90%;
margin: auto;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.container {
height: 100%;
overflow: hidden;
}
.content {
height: 100%;
display: flex;
flex-wrap: nowrap;
transition: transform 0.6s ease;
}
.item {
height: 100%;
width: 100%;
flex: 0 0 100%;
}
.itemContent {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.btnPrev,
.btnNext {
top: 50%;
z-index: 10;
}
.btnPrev {
left: 0;
}
.btnNext {
right: 0;
}