使用 CSS 创建像无限滚动一样的滑块

Question

我正在尝试创建 CSS 滑块无限滚动，但没有附加/添加/创建 DOM 元素。无限滚动就像到达最后一张幻灯片时一样，第一张幻灯片应该在它之后再次显示。

我有一个固定宽度的幻灯片，所以使用 slick 和 box 滑块插件对我不起作用。

.slider-wrap {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid red;
}

.slider-wrap .slide {
  display: inline-block;
  width: 200px;
  margin: 5px;
}

.slider-wrap .slide img {
  width: 100%;
}

<div class="slider-wrap">

  <div class="slide">
    <img src="http://via.placeholder.com/350x150">
  </div>
  <div class="slide">
    <img src="http://via.placeholder.com/350x150">
  </div>
  <div class="slide">
    <img src="http://via.placeholder.com/350x150">
  </div>
  <div class="slide">
    <img src="http://via.placeholder.com/350x150">
  </div>
  <div class="slide">
    <img src="http://via.placeholder.com/350x150">
  </div>
  <div class="slide">
    <img src="http://via.placeholder.com/350x150">
  </div>
  <div class="slide">
    <img src="http://via.placeholder.com/350x150">
  </div>

</div>

Answer 1

这里有两个选项：

• 克隆项目：您会得到更自然的方法（克隆还不错）。这是您通常会在网站上找到的用于添加更多内容的系统。

• 恢复位置滚动位置到另一个位置，使滑块看起来永远不会结束。请注意，这不会使滚动条变小，因为滑块的内容永远不会改变

---

(a) 克隆

正如你所说，你可以克隆图像。

诀窍是确定滚动条何时到达滑块的末端以克隆更多图像：

$(function() {
  $('.slider-wrap').scroll(function() {
    
    const slider = $(this);
          width = slider.innerWidth()
          scrollWidth = slider[0].scrollWidth;
          scrollLeft = slider.scrollLeft();
    
    if(scrollWidth - width == scrollLeft) {
      slider.children().clone().appendTo(slider);
    }
    
  });
});

.slider-wrap {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid red;
}

.slider-wrap .slide {
  display: inline-block;
  width: 200px;
  margin: 5px;
}

.slider-wrap .slide img {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider-wrap">
  <div class="slide">
    <img src="http://via.placeholder.com/350x150">
  </div>
  <div class="slide">
    <img src="http://via.placeholder.com/350x150">
  </div>
  <div class="slide">
    <img src="http://via.placeholder.com/350x150">
  </div>
  <div class="slide">
    <img src="http://via.placeholder.com/350x150">
  </div>
  <div class="slide">
    <img src="http://via.placeholder.com/350x150">
  </div>
  <div class="slide">
    <img src="http://via.placeholder.com/350x150">
  </div>
  <div class="slide">
    <img src="http://via.placeholder.com/350x150">
  </div>

</div>

---

这是一个演示：

$(function(){$('.slider-wrap').scroll(function(){const slider=$(this);var $width=slider.innerWidth()
var $scrollWidth=slider[0].scrollWidth;var $scrollLeft=slider.scrollLeft();if($scrollWidth-$width==$scrollLeft){slider.children().clone().appendTo(slider)}})})

.slider-wrap{white-space:nowrap;overflow-x:auto;overflow-y:hidden;border:1px solid red}.slider-wrap .slide{display:inline-block;margin:5px}.slider-wrap .slide img{height:120px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="slider-wrap"> <div class="slide"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTa4e2VF6cfou9oL0cc5OAzVTEbmAgFjIW2r-7lTkpOljG9k38N"> </div><div class="slide"> <img src="https://nbocdn.akamaized.net/Assets/Images_Upload/2018/01/06/0060bbce-f2f2-11e7-bf60-029def90d6d6_web_scale_0.0542636_0.0542636__.jpg?maxheight=460&maxwidth=638&scale=both"> </div><div class="slide"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQr0xQ-gVF1Sy1a1sHoUyfGdrBwyz-5u0Tirkt-uNCKd-AzNXY1ww"> </div><div class="slide"> <img src="https://cdn.pixabay.com/photo/2017/05/29/15/34/kitten-2354016_960_720.jpg"> </div><div class="slide"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTJLwVbVu6tjubsduR43je-Muk7p8lAKDu569GuL_yDWGzrZwp2"> </div><div class="slide"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRHeW6zNDdDQBwtpuu3RvLW1ihM3Za-OLBoOMRR_4z7GvwYor2eQ"> </div><div class="slide"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRKeCmurlUrTtd4CjvXYskGVAUAiDq5X49iNb3XhOcMss2vN8c6"> </div></div>

---

(b) 使用 scrollLeft 的 hack

您还可以通过将scrollLeft 设置为首次添加新幻灯片容器时的位置，直接返回到第一个幻灯片容器：

let firstPos = undefined;

$('.slider').scroll(function() {

  const slider = $(this);
        width = slider.innerWidth()
        scrollWidth = slider[0].scrollWidth;
        scrollLeft = slider.scrollLeft();
        isEndOfSlider = (scrollWidth - width) == scrollLeft;
        numberOfWraps = slider.children().length;


  if(isEndOfSlider) {    
    
    if(numberOfWraps == 1) {

      firstPos = scrollLeft;
      slider.children().first().clone().appendTo(slider);

    } else {

      slider.scrollLeft(firstPos);

    }      

  }


});

.slider {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid red;
}

.slider-wrap {
  display: inline-block;
}

.slider-wrap .slide {
  display: inline-block;
  width: 200px;
  margin: 5px;
}

.slider-wrap .slide img {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
  <div class="slider-wrap">
    <div class="slide">1
      <img src="http://via.placeholder.com/350x150">
    </div>
    <div class="slide">2
      <img src="http://via.placeholder.com/350x150">
    </div>
    <div class="slide">3
      <img src="http://via.placeholder.com/350x150">
    </div>
    <div class="slide">...
      <img src="http://via.placeholder.com/350x150">
    </div>
    <div class="slide">...
      <img src="http://via.placeholder.com/350x150">
    </div>
    <div class="slide">-2
      <img src="http://via.placeholder.com/350x150">
    </div>
    <div class="slide">-1
      <img src="http://via.placeholder.com/350x150">
    </div>
  </div>
</div>

---

这是一个演示：

let firstPos=undefined;$('.slider').scroll(function(){const slider=$(this);width=slider.innerWidth()
scrollWidth=slider[0].scrollWidth;scrollLeft=slider.scrollLeft();isEndOfSlider=(scrollWidth-width)==scrollLeft;numberOfWraps=slider.children().length;if(isEndOfSlider){if(numberOfWraps==1){firstPos=scrollLeft;slider.children().first().clone().appendTo(slider)}else{slider.scrollLeft(firstPos)}}})

.slider{white-space:nowrap;overflow-x:auto;overflow-y:hidden;border:1px solid red}.slider-wrap{display:inline-block}.slider-wrap .slide{display:inline-block;margin:5px}.slider-wrap .slide img{width:auto;height:120px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="slider"> <div class="slider-wrap"> <div class="slide"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTa4e2VF6cfou9oL0cc5OAzVTEbmAgFjIW2r-7lTkpOljG9k38N"> </div><div class="slide"> <img src="https://nbocdn.akamaized.net/Assets/Images_Upload/2018/01/06/0060bbce-f2f2-11e7-bf60-029def90d6d6_web_scale_0.0542636_0.0542636__.jpg?maxheight=460&maxwidth=638&scale=both"> </div><div class="slide"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQr0xQ-gVF1Sy1a1sHoUyfGdrBwyz-5u0Tirkt-uNCKd-AzNXY1ww"> </div><div class="slide"> <img src="https://cdn.pixabay.com/photo/2017/05/29/15/34/kitten-2354016_960_720.jpg"> </div><div class="slide"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTJLwVbVu6tjubsduR43je-Muk7p8lAKDu569GuL_yDWGzrZwp2"> </div><div class="slide"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRHeW6zNDdDQBwtpuu3RvLW1ihM3Za-OLBoOMRR_4z7GvwYor2eQ"> </div><div class="slide"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRKeCmurlUrTtd4CjvXYskGVAUAiDq5X49iNb3XhOcMss2vN8c6"> </div></div></div>