/* ====== 基础尺寸 & 容器 ====== */
.wrapper{
  width: 100%;
  max-width: 100%;
  margin: 1.5rem 0;
  position: relative;
}

.slider-wrapper{
  position: relative;
  width: 100%;
  height: 550px;
  overflow: hidden;
  border-radius: 12px;
  background: #f2f2f2;
  box-shadow: 0 10px 24px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08);

  /* 新增：每个实例自己的张数，默认 5，可在 HTML 行内或 JS 中覆盖 */
  --count: 5;
}

/* ====== 轨道与图片（用 --count 计算宽度/分栏） ====== */
.slider-wrapper .inner{
  display: flex;
  width: calc(var(--count) * 100%);
  height: 100%;
  transition: margin-left .8s cubic-bezier(0.77,0,0.175,1);
}

.slider-wrapper article{
  width: calc(100% / var(--count));
  height: 100%;
  position: relative;
  flex: 0 0 calc(100% / var(--count));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.slider-wrapper article img{
  width: 100%;
  height: 100%;
  object-fit: var(--fit, cover); /* ← 关键修改 */
  border-radius: 12px;
  display: block;
}

/* ====== 圆点（放在图片框内底部） ====== */
.slider-dot-control{
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 8px;
}

.slider-dot-control button{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #bbb;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background-color .25s ease;
}

.slider-dot-control button:hover{ background:#ddd; }
.slider-dot-control button.active{ background:#333; }

/* ====== 左右按钮（常驻在照片两侧） ====== */
.slider-prev-next-control{
  position: absolute;
  inset: 0;
  z-index: 100;
  pointer-events: none;  /* 容器不拦截，按钮本身开启 */
}

.slider-prev-next-control .btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  pointer-events: auto;
  cursor: pointer;
  border: 0;
  z-index: 100;
  transition: background .3s ease;
}

.slider-prev-next-control .prev{ left: 12px; }
.slider-prev-next-control .next{ right: 12px; }

/* 箭头（纯 CSS 小尖角） */
.slider-prev-next-control .btn::before{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  border: 3px solid #fff;
  border-left: 0; border-bottom: 0;
  transform: translate(-50%, -50%) rotate(45deg); /* “>” */
}

.slider-prev-next-control .prev::before{
  transform: translate(-50%, -50%) rotate(225deg); /* “<” */
}

.slider-prev-next-control .btn:hover{
  background: rgba(0,0,0,.5);
}

/* ====== 响应式（可选） ====== */
@media (max-width: 1200px){
  .wrapper{ width: 92vw; }
  .slider-wrapper{ height: 52vw; max-height: 460px; }
}

/* 只有带该类的实例使用 contain */
.slider-wrapper.is-contain{ --fit: contain; }


/* 仅这个包含 is-contain 的 slider 用白色背景 */
.slider-wrapper.is-contain{
  background: #fff;                /* 容器背景改白 */
}

.slider-wrapper.is-contain article{
  background: #fff;                /* 上下留白（letterbox）改白 */
}

/* 建议：图片不要再加圆角，圆角由外层容器控制，避免四角露灰 */
.slider-wrapper.is-contain article img{
  border-radius: 0;
}