personal-page/_src/components/Carousel/Carousel.module.css

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