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

时间：2018-06-28 14:53:30

标签： javascript jquery css

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

我有固定宽度的幻灯片，因此无法使用光滑和框形滑块插件。

.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>

1 个答案:

答案 0 :(得分：3)

这里有两个选项：

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

  • 将位置还原到另一个位置，以使滑块看起来永无止境。注意，这不会使滚动条变小，因为滑块的内容永远不会改变

（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的骇客

您还可以通过将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>

相关问题
最新问题