/* 轮播容器：支持任意宽高+padding，仅需自定义ID样式 */
.slider-wrap {
    position: relative;
    margin: 30px auto;
    padding: 10px; /* 可自定义padding */
    box-sizing: border-box; /* 关键：padding不撑开宽度 */
    overflow: hidden;
}

/* 轮播列表：动态宽度，原生过渡（优化无缝） */
.slider-list {
    position: absolute;
    left: 0;
    top: 0;
    width: auto; /* 动态计算，不写死 */
    height: calc(100% - 20px); /* 扣除上下padding（10px*2） */
    margin: 10px 0 0 10px; /* 适配左右padding（10px） */
    padding: 0;
    list-style: none;
    transition: left 0.6s ease-in-out; /* 优化过渡曲线，更丝滑 */
}

/* 轮播项：动态适配容器内容宽度 */
.slider-item {
    position: relative; /* 关键：让文字层相对轮播项定位 */
    float: left;
    height: 100%; /* 继承列表高度 */
    margin: 0;
    padding: 0;
}

/* 图片：强制适配，无放大/拉伸 */
.slider-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* 保持比例 */
    border-radius: 8px;
    transform: none !important; /* 杜绝缩放 */
}

/* 圆点样式：修复选中色+优化交互 */
.slider-dots {
    position: absolute;
    bottom: 25px;
    right: 20px !important; /* 靠右显示 */
    left: auto !important; /* 取消居中 */
    transform: none !important; /* 取消平移 */
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 10;
}
.slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.6); /* 未选中：半透白 */
    float: left;
    margin: 0 5px;
    cursor: pointer;
    transition: all 0.3s ease; /* 圆点过渡 */
    border: 1px solid transparent; /* 防止选中时偏移 */
}
/* 修复选中圆点样式：橙色底+白色描边（非全白） */
.slider-dot.active {
    background: #fff; /* 选中：白色（可根据需求修改） */
    opacity: 1;
    transform: scale(1.2);
}

/* 图片底部文字层样式 */
.slider-text {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 12px 20px; /* 文字内边距 */
    color: #fff; /* 文字颜色 */
    font-size: 18px; /* 文字大小 */
    box-sizing: border-box;
    /* 核心：单行省略 */
    white-space: nowrap; /* 强制单行 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 超出显示... */
    z-index: 5; /* 确保在图片上方 */

}

/* 轮播跳转链接样式 */
.slider-link {
    display: block; /* 确保链接覆盖整个轮播项 */
    width: 100%;
    height: 100%;
    text-decoration: none; /* 取消默认下划线 */
}

/* 箭头核心样式 - 放大尺寸+矩形背景 */
.slider-arrow {
    position: absolute;
    top: 35%;
    /* 放大箭头容器尺寸，视觉更突出 */
    width: 70px;
    height: 90px;
    cursor: pointer;
    z-index: 10;
    /* 初始隐藏 + 平滑过渡 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none; /* 隐藏时不响应点击 */
    /* 用于居中绘制的箭头 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 纯CSS绘制左箭头 */
.slider-arrow-left::after {
    content: '';
    width: 24px; /* 箭头线条宽度 */
    height: 24px; /* 箭头线条高度 */
    border-top: 4px solid #ffffff; /* 箭头线条样式 */
    border-left: 4px solid #ffffff;
    transform: rotate(-45deg); /* 旋转成左箭头形状 */
}

/* 纯CSS绘制右箭头 */
.slider-arrow-right::after {
    content: '';
    width: 24px;
    height: 24px;
    border-top: 4px solid #ffffff;
    border-right: 4px solid #ffffff;
    transform: rotate(45deg); /* 旋转成右箭头形状 */
}

/* 左箭头位置 */
.slider-arrow-left {
    left: 15px;
}

/* 右箭头位置 */
.slider-arrow-right {
    right: 15px;
}

/* hover容器时显示箭头 */
.slider-wrap:hover .slider-arrow {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 箭头hover效果：加深背景，增强交互 */
.slider-arrow:hover {
    /*transform: scale(1.2);*/
}