react-hartan/Components/Carousel/Carousel.module.css

A simple components library for React

/* Carousel Styling */

/* Carousel container */
.carousel {
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 2px solid rgb(179, 175, 175);
    border-radius: .5rem;
    position: relative;
    width: 50rem;
    height: 25rem;
}

/* Arrows container */
.arrows {
    cursor: pointer;
    display: flex;
    justify-content: center;
}

.leftArrow,
.rightArrow {
    position: absolute;
    font-size: 3rem;
    top: 50%;
    transform: translateY(-50%);
    color: gray;
}

.leftArrow {
    left: 1%;
}

.rightArrow {
    right: 1%;
}

/* images container */
.images {
    display: flex;
    gap: 1rem;
    overflow: hidden;
}

.slides {
    width: 100%;
}

.slides img {
    width: 100%;
    height: 100%;
}

/* responsive design */
@media(width<768px){
    .carousel{
        width: 40rem;
        height: 20rem;
    }
}

@media(width<471px){
    .carousel{
        width: 32rem;
        height: 16rem;
    }
}