.carousel {

}

.carousel li {
    list-style: none;
}

/* 1. 样式重置 */
.carousel * {
    margin: 0;
    padding: 0;
}

/* 外层盒子样式,左右箭头和小圆点都要采用绝对定位，所以其父盒子要采用相对定位*/
.carousel .banners {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100px;
    margin: 30px auto;
    border-radius: 15px;
    left: 0;
}

/*滚动区 包裹所有图片的盒子 宽度要足够宽可以放下所有的图片*/
.carousel .images {
    position: absolute;
    top: 0;
    left: 0;
    width: 1200%;
}

/* 对图片使用浮动 使其排列在一行*/
.carousel .images li {
    float: left;
}

.carousel .btn {
    display: block;
    width: 40px;
    height: 60px;
    transition: opacity 0.3s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    margin-top: -30px;
}

.carousel .banners:hover .btn {
    opacity: 0.7;
}

.carousel .banners .btn:hover {
    opacity: 1;
}

.carousel .btn img {
    width: 40px;
    height: 60px;
    margin: 0;
    padding: 0;
}

.carousel .prev {
    left: 10px;
}

.carousel .next {
    right: 10px;
}

.carousel .selectors {
    position: absolute;
    bottom: 17px;
    left: 50%;
    height: 13px;
    transform: translateX(-50%);
}

/* 小圆点样式*/
.carousel .selectors li {
    display: inline-block;
    width: 28px;
    height: 8px;
    background-color: rgba(255, 255, 255, .6);
    margin: 3px;
    border-radius: 4px;
}

/* 小圆点被点击的样式 */
.carousel .selectors .active {
    background-color: var(--theme-color-highlight)
}