浮动轮播元素换行且滚动不显示，滑块仅显示6个元素问题

看起来你的轮播遇到了两个核心问题：元素因为容器宽度不够换行，以及滚动边界计算错误导致无法显示全部内容。咱们一步步来修复：

问题根源拆解 #

1. 容器宽度不足：你的#tslshow固定宽度为1200px，但每个.bktibx元素（含margin-right）总宽度是186px + 10px = 196px，20个元素总宽度需要3920px，远大于1200px，所以浮动元素被迫换行。
2. 滚动边界硬编码：sliderLimit写死为-450px，这个值太小，根本滚动不到后面的元素。
3. 浮动布局不适合横向滚动：float:left在容器宽度不足时必然换行，改用inline-block+white-space:nowrap的组合更适合横向滚动场景。

修复方案&修改后的代码 #

1. 调整CSS样式 #

主要修改布局方式，确保所有轮播元素在同一行，容器能容纳所有元素：

.bstimeslider {
  background: transparent;
  height: 126px;
  position: relative;
  width: 1100px;
}
.bktibx {
  background: rgba(17,17,17,.7);
  color: #ffffff;
  display: inline-block; /* 替换float:left */
  vertical-align: top; /* 避免元素对齐错位 */
  height: 126px;
  font-size: 16px;
  margin:0 10px 0 0;
  width: 186px;
}
.bktibx-top {
  background: rgba(17,17,17,.7);
  color: #ffffff;
  display: block;
  font-size: 16px;
  margin: 0 40px 0 0;
  padding: 10px;
  width: 166px;
}
.bktibx img {
  height: 88px;
  padding-top: 0px;
  width: 186px;
}
#tslshow {
  left: 0;
  position: absolute;
  white-space: nowrap; /* 强制子元素不换行 */
  width: auto; /* 自动适应子元素总宽度，或者手动计算：196px * 20 = 3920px */
}
#leftArrow {
  background: #ff0000;
  height: 45px;
  left: 0px;
  position: absolute;
  top: 41px;
  width: 40px;
  cursor: pointer; /* 加个鼠标指针提示可点击 */
}
#rightArrow {
  background: #ff0000;
  height: 45px;
  position: absolute;
  right: 0px;
  top: 41px;
  width: 40px;
  cursor: pointer; /* 加个鼠标指针提示可点击 */
}
#viewContainer {
  background: transparent;
  height: 100%;
  margin: 0px 40px 0px 40px;
  overflow: hidden;
  position: absolute;
  width: 1020px;
}

2. 优化JS逻辑 #

动态计算滚动边界，确保能滚动到最后一个元素：

$(window).load(function() {
  var view = $("#tslshow");
  var move = 196; // 每个元素的宽度+margin-right，不用加px，直接数值计算更方便
  var itemCount = view.find('.bktibx').length;
  var viewWidth = $('#viewContainer').width();
  // 计算最大左移距离：总宽度 - 可视区域宽度，取负数
  var sliderLimit = -(itemCount * move - viewWidth);

  $("#rightArrow").click(function() {
    var currentPosition = parseInt(view.css("left")) || 0; // 处理初始可能的auto值
    if (currentPosition > sliderLimit) {
      view.stop(false, true).animate({ left: "-=" + move + "px" }, { duration: 200 });
    }
  });

  $("#leftArrow").click(function() {
    var currentPosition = parseInt(view.css("left")) || 0;
    if (currentPosition < 0) {
      view.stop(false, true).animate({ left: "+=" + move + "px" }, { duration: 200 });
    }
  });
});

3. HTML补充（你的原HTML末尾有点截断，确保所有.bktibx都闭合） #

确保所有轮播元素的标签都正确闭合，比如最后几个</div>要补上，避免布局异常。

关键修改说明 #

• 布局方式替换：用inline-block+white-space:nowrap替代float:left，彻底解决元素换行问题。
• 动态计算滚动边界：根据元素数量和可视区域宽度自动计算最大滚动距离，不管你加多少个元素都能适配。
• 细节优化：给箭头加cursor:pointer提升交互体验，用数值计算替代字符串拼接减少错误。

内容的提问来源于stack exchange，提问作者Jessie Williams