/* 轮播容器样式 */
.carousel {
    position: relative; /* 相对定位，以便绝对定位的按钮可以相对于它定位 */
    overflow: hidden; /* 隐藏超出容器的内容 */
    backdrop-filter: blur(10vh); /* 毛玻璃效果 */
    max-width: 125vh; /* 设置轮播框的最大宽度 */
    min-width: 50vh; /* 设置轮播框的最小宽度 */
    margin: 0 auto; /* 居中轮播框 */
    
}


/* 轮播图片容器样式 */
.carousel-images {
    display: flex; /* 使用flex布局，使图片横向排列 */
    transition: transform 0.5s ease; /* 添加平滑过渡效果 */
    width: 100%; /* 确保轮播容器宽度为100% */
}

/* 图片样式 */
.carousel-images img {
    width: 100%; /* 使用视口宽度单位，确保图片宽度为视口的100% */
    height: auto; /* 高度自适应 */
    flex-shrink: 0; /* 防止图片缩小 */
}

/* 按钮样式 */
button.prev, button.next {
    position: absolute; /* 绝对定位 */
    top: 50%; /* 垂直居中 */
    transform: translateY(-50%); /* 通过transform实现精确居中 */
    background-color: rgba(255, 255, 255, 0.5); /* 半透明背景 */
    border: none; /* 无边框 */
    cursor: pointer; /* 鼠标悬停时显示为手型 */
}

/* 上一张按钮位置 */
button.prev {
    background: rgba(255, 255, 255, 0.159); /* 设置半透明背景，颜色为白色，透明度为0.5 */
    
    left: 10px; /* 距离左侧10px */
    border-radius: 8vh; /* 设置圆角效果，半径为8px */
}

/* 下一张按钮位置 */
button.next {
    background: rgba(255, 255, 255, 0.159); /* 设置半透明背景，颜色为白色，透明度为0.5 */
    
    right: 10px; /* 距离右侧10px */
    border-radius: 20vh; /* 设置圆角效果，半径为8px */
}