时间戳

首页 > 解决方案 > 浮动轮播元素环绕而不是全部保留在同一行并且在滚动时不显示

javascript - 浮动轮播元素环绕而不是全部保留在同一行并且在滚动时不显示

问题描述

我有近 20<div>张图片在滑块中，但只有 6 张出现：

$(window).load(function() {
  var view = $("#tslshow");
  var move = "196px";
  var sliderLimit = -450

  $("#rightArrow").click(function() {
    var currentPosition = parseInt(view.css("left"));
    
    if (currentPosition >= sliderLimit) view.stop(false, true).animate({
      left: "-=" + move
    }, {
      duration: 200
    })
  });

  $("#leftArrow").click(function() {
    var currentPosition = parseInt(view.css("left"));
    
    if (currentPosition < 0) view.stop(false, true).animate({
      left: "+=" + move
    }, {
      duration: 200
    })
  });
});
.bstimeslider {
  background: transparent;
  height: 126px;
  position: relative;  
  width: 1100px;  
}

.bktibx { 
  background: rgba(17,17,17,.7);
  color: #ffffff; 
  display: block; 
  height: 126px; 
  float: left;
  font-size: 16px;
  margin:0 10px 0 0;
  width: 186px; 
}

.bktibx-top { 
  background: rgba(17,17,17,.7);
  color: #ffffff; 
  display: block; 
  float: left;
  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;
  width: 1200px;  
}

#leftArrow {
  background: #ff0000; 
  height: 45px;
  left: 0px;
  position: absolute;
  top: 41px;
  width: 40px;
}

#rightArrow { 
  background: #ff0000; 
  height: 45px;
  position: absolute;
  right: 0px;
  top: 41px;
  width: 40px;
}

#viewContainer {
  background: transparent;
  height: 100%;
  margin: 0px 40px 0px 40px;
  overflow: hidden;
  position: absolute;
  width: 1020px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="bstimeslider">

  <div id="rightArrow"></div>
  
  <div id="viewContainer">
    <div id="tslshow">
    
      <div class="bktibx">
        <div class="bktibx-top">
          transparent
        </div>
        <img src="https://www.bing.com/th?id=OPN.RTNews_iokoUEg279vnqHFa5nIABQ&w=186&h=88&c=7&rs=2&qlt=80&cdv=1&pid=News"/>
      </div>
      
      <div class="bktibx">
        <div class="bktibx-top">
          transparent
        </div>
        <img src="https://www.bing.com/th?id=OPN.RTNews_iokoUEg279vnqHFa5nIABQ&w=186&h=88&c=7&rs=2&qlt=80&cdv=1&pid=News"/>
      </div>
      
      <div class="bktibx">
        <div class="bktibx-top">
          transparent
        </div>
        <img src="https://www.bing.com/th?id=OPN.RTNews_iokoUEg279vnqHFa5nIABQ&w=186&h=88&c=7&rs=2&qlt=80&cdv=1&pid=News"/>
      </div>
      
      <div class="bktibx">
        <div class="bktibx-top">
          transparent
        </div>
        <img src="https://www.bing.com/th?id=OPN.RTNews_iokoUEg279vnqHFa5nIABQ&w=186&h=88&c=7&rs=2&qlt=80&cdv=1&pid=News"/>
      </div>
      
      <div class="bktibx">
        <div class="bktibx-top">
          transparent
        </div>
        <img src="https://www.bing.com/th?id=OPN.RTNews_iokoUEg279vnqHFa5nIABQ&w=186&h=88&c=7&rs=2&qlt=80&cdv=1&pid=News"/>
      </div>
      
      <div class="bktibx">
        <div class="bktibx-top">
          transparent
        </div>
        <img src="https://www.bing.com/th?id=OPN.RTNews_iokoUEg279vnqHFa5nIABQ&w=186&h=88&c=7&rs=2&qlt=80&cdv=1&pid=News"/>
      </div>
      
      <div class="bktibx">
        <div class="bktibx-top">
          transparent
        </div>
        <img src="https://www.bing.com/th?id=OPN.RTNews_iokoUEg279vnqHFa5nIABQ&w=186&h=88&c=7&rs=2&qlt=80&cdv=1&pid=News"/>
      </div>
      
      <div class="bktibx">
        <div class="bktibx-top">
          transparent
        </div>
        <img src="https://www.bing.com/th?id=OPN.RTNews_iokoUEg279vnqHFa5nIABQ&w=186&h=88&c=7&rs=2&qlt=80&cdv=1&pid=News"/>
      </div>
      
      <div class="bktibx">
        <div class="bktibx-top">
          transparent
        </div>
        <img src="https://www.bing.com/th?id=OPN.RTNews_iokoUEg279vnqHFa5nIABQ&w=186&h=88&c=7&rs=2&qlt=80&cdv=1&pid=News"/>
      </div>
      
      <div class="bktibx">
        <div class="bktibx-top">
          transparent
        </div>
        <img src="https://www.bing.com/th?id=OPN.RTNews_iokoUEg279vnqHFa5nIABQ&w=186&h=88&c=7&rs=2&qlt=80&cdv=1&pid=News"/>
      </div>
      
      <div class="bktibx">
        <div class="bktibx-top">
          transparent
        </div>
        <img src="https://www.bing.com/th?id=OPN.RTNews_iokoUEg279vnqHFa5nIABQ&w=186&h=88&c=7&rs=2&qlt=80&cdv=1&pid=News"/>
      </div>
      
      <div class="bktibx">
        <div class="bktibx-top">
          transparent
        </div>
        <img src="https://www.bing.com/th?id=OPN.RTNews_iokoUEg279vnqHFa5nIABQ&w=186&h=88&c=7&rs=2&qlt=80&cdv=1&pid=News"/>
      </div>
      
      <div class="bktibx">
        <div class="bktibx-top">
          transparent
        </div>
        <img src="https://www.bing.com/th?id=OPN.RTNews_iokoUEg279vnqHFa5nIABQ&w=186&h=88&c=7&rs=2&qlt=80&cdv=1&pid=News"/>
      </div>
      
      <div class="bktibx">
        <div class="bktibx-top">
          transparent
        </div>
        <img src="https://www.bing.com/th?id=OPN.RTNews_iokoUEg279vnqHFa5nIABQ&w=186&h=88&c=7&rs=2&qlt=80&cdv=1&pid=News"/>
      </div>
      
      <div class="bktibx">
        <div class="bktibx-top">
          transparent
        </div>
        <img src="https://www.bing.com/th?id=OPN.RTNews_iokoUEg279vnqHFa5nIABQ&w=186&h=88&c=7&rs=2&qlt=80&cdv=1&pid=News"/>
      </div>
      
    </div>
  </div>
  
  <div id="leftArrow"></div>
</div>

标签： javascriptcssanimationoverflowcarousel

解决方案

您的元素正在包装，因为#tslshow不够宽，您可以查看是否与检查员核对。

您有 3 个选项来修复它：

  1. 使用white-space: nowrapand display: inline-block（您可以在下面的代码段中看到一些额外的调整）：

    .bktibx {
    display: inline-block; /* Instead of float: left */
}

#tslshow {
    white-space: nowrap;
    font-size: 0;
}

  2. 使用弹性盒：

    .bktibx {
    /* Just remove float: left; */
}

#tslshow {
    display: flex;
}

  3. 使用max-width: unset和min-width: max-content（实验）：

    #tslshow {
    position: absolute;
    left: 0;
    max-width: unset;
    min-width: max-content;
}

使用第一个和第二个选项，您还可以删除position: absolutefrom#tslshow并使用transform: translate(-Npx)andtransition: translate ease-in 250ms滚动它并为其设置动画。

在第三个中，您仍然可以使用left，但使用动画transition: left ease-in 250ms而不是使用 jQuery。

选项 1 - 空格：nowrap：

const scrollable = document.getElementById('tslshow');
const children = 20;

// Just to avoid having that big ching of HTML:
scrollable.innerHTML = `
  <div class="bktibx">
    <div class="bktibx-top">Title</div>
    <img src="https://www.bing.com/th?id=OPN.RTNews_iokoUEg279vnqHFa5nIABQ&w=186&h=88&c=7&rs=2&qlt=80&cdv=1&pid=News"/>
  </div>
`.repeat(children);

const move = 196;
const min = - (move * scrollable.children.length) + 10 + scrollable.offsetWidth;

let current = 0;

document.getElementById('rightArrow').onclick = () => {
  current = Math.max(min, current - move);

  scrollable.style.transform = `translate(${ current }px)`;
};

document.getElementById('leftArrow').onclick = () => {
  current = Math.min(0, current + move);

  scrollable.style.transform = `translate(${ current }px)`;
};
.bstimeslider {
  background: transparent;
  height: 126px;
  position: relative;  
  width: 100%;  
}

.bktibx { 
  background: rgba(17,17,17,.7);
  color: #ffffff; 
  display: block; 
  height: 126px;
  font-size: 16px;
  margin:0 10px 0 0;
  width: 186px;
  
  /* I have changed this (instead of float: left)... */
  display: inline-block;
}

.bktibx-top { 
  background: rgba(17,17,17,.7);
  color: #ffffff; 
  display: block;
  font-size: 16px;
  margin: 0 40px 0 0;
  padding: 10px;
  width: 166px;
  
  /* ...removed the float: left here... */
}

.bktibx img { 
  height: 88px;
  padding-top: 0px;
  width: 186px;
}

#tslshow {
  /* ...changed this completelly... */
  white-space: nowrap;
  font-size: 0;
  transition: transform ease-in 250ms;
}

#leftArrow {
  background: #ff0000; 
  height: 45px;
  left: 0px;
  position: absolute;
  top: 41px;
  width: 40px;
}

#rightArrow { 
  background: #ff0000; 
  height: 45px;
  position: absolute;
  right: 0px;
  top: 41px;
  width: 40px;
}

#viewContainer {
  background: transparent;
  height: 100%;
  overflow: hidden;

  /* ...and changed this. */
  position: absolute;
  top: 0;
  left: 40px;
  right: 40px;
}
<div class="bstimeslider">
  <div id="rightArrow"></div>
  
  <div id="viewContainer">
    <div id="tslshow"></div>
  </div>
  
  <div id="leftArrow"></div>
</div>

✨ 选项 2 - Flexbox：

const scrollable = document.getElementById('tslshow');
const children = 20;

// Just to avoid having that big ching of HTML:
scrollable.innerHTML = `
  <div class="bktibx">
    <div class="bktibx-top">Title</div>
    <img src="https://www.bing.com/th?id=OPN.RTNews_iokoUEg279vnqHFa5nIABQ&w=186&h=88&c=7&rs=2&qlt=80&cdv=1&pid=News"/>
  </div>
`.repeat(children);

const move = 196;
const min = - (move * scrollable.children.length) + 10 + scrollable.offsetWidth;

let current = 0;

document.getElementById('rightArrow').onclick = () => {
  current = Math.max(min, current - move);

  scrollable.style.transform = `translate(${ current }px)`;
};

document.getElementById('leftArrow').onclick = () => {
  current = Math.min(0, current + move);

  scrollable.style.transform = `translate(${ current }px)`;
};
.bstimeslider {
  background: transparent;
  height: 126px;
  position: relative;  
  width: 100%;  
}

.bktibx { 
  background: rgba(17,17,17,.7);
  color: #ffffff; 
  display: block; 
  height: 126px;
  font-size: 16px;
  margin:0 10px 0 0;
  width: 186px; 

  /* I have removed float: left here... */
}

.bktibx-top { 
  background: rgba(17,17,17,.7);
  color: #ffffff; 
  display: block;
  float: left;
  font-size: 16px;
  margin: 0 40px 0 0;
  padding: 10px;
  width: 166px; 
}

.bktibx img { 
  height: 88px;
  padding-top: 0px;
  width: 186px;
}

#tslshow {
  /* ...changed this completelly... */
  display: flex;
  transition: transform ease-in 250ms;
}

#leftArrow {
  background: #ff0000; 
  height: 45px;
  left: 0px;
  position: absolute;
  top: 41px;
  width: 40px;
}

#rightArrow { 
  background: #ff0000; 
  height: 45px;
  position: absolute;
  right: 0px;
  top: 41px;
  width: 40px;
}

#viewContainer {
  background: transparent;
  height: 100%;
  overflow: hidden;

  /* ...changed this. */
  position: absolute;
  top: 0;
  left: 40px;
  right: 40px;
}
<div class="bstimeslider">
  <div id="rightArrow"></div>
  
  <div id="viewContainer">
    <div id="tslshow"></div>
  </div>
  
  <div id="leftArrow"></div>
</div>

选项 3 - 实验性最大宽度：最大内容

const scrollable = document.getElementById('tslshow');
const children = 20;

// Just to avoid having that big ching of HTML:
scrollable.innerHTML = `
  <div class="bktibx">
    <div class="bktibx-top">Title</div>
    <img src="https://www.bing.com/th?id=OPN.RTNews_iokoUEg279vnqHFa5nIABQ&w=186&h=88&c=7&rs=2&qlt=80&cdv=1&pid=News"/>
  </div>
`.repeat(children);

const move = 196;
const min = - (move * scrollable.children.length) + 10 + scrollable.parentElement.offsetWidth;

let current = 0;

document.getElementById('rightArrow').onclick = () => {
  current = Math.max(min, current - move);

  scrollable.style.left = `${ current }px`;
};

document.getElementById('leftArrow').onclick = () => {
  current = Math.min(0, current + move);

  scrollable.style.left = `${ current }px`;
};
.bstimeslider {
  background: transparent;
  height: 126px;
  position: relative;  
  width: 100%;  
}

.bktibx { 
  background: rgba(17,17,17,.7);
  color: #ffffff; 
  display: block; 
  height: 126px; 
  float: left;
  font-size: 16px;
  margin:0 10px 0 0;
  width: 186px; 
}

.bktibx-top { 
  background: rgba(17,17,17,.7);
  color: #ffffff; 
  display: block; 
  float: left;
  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;
  
  /* I have change this... */
  max-width: unset;
  min-width: max-content;
  transition: left ease-in 250ms;
}

#leftArrow {
  background: #ff0000; 
  height: 45px;
  left: 0px;
  position: absolute;
  top: 41px;
  width: 40px;
}

#rightArrow { 
  background: #ff0000; 
  height: 45px;
  position: absolute;
  right: 0px;
  top: 41px;
  width: 40px;
}

#viewContainer {
  background: transparent;
  height: 100%;
  overflow: hidden;
  
  /* ...and this */
  position: absolute;
  top: 0;
  left: 40px;
  right: 40px;
}
<div class="bstimeslider">
  <div id="rightArrow"></div>
  
  <div id="viewContainer">
    <div id="tslshow"></div>
  </div>
  
  <div id="leftArrow"></div>
</div>

推荐阅读