如何在到达一端的点击滑块上实现无限过渡效果？(过渡问题)

Question

我正在制作一个自定义滑块(照片滑块)，当您单击您转到下一张幻灯片。我到达了一个很好的下降结果但是

当到达滑块的一端(右和左)时，我不知道如何使它过渡，就像它是一个无限的滑块一样，我的滑块只是通过所有的滑块到另一端。我想做一个重复的滑块来过渡，但不能让它工作。

你有什么意见建议？

非常感谢

​

var countslider = 0;
var nombreslide = 3;
var nbslidecachee = nombreslide - 1;
var limitslider = nbslidecachee * 100;

function sliderright() {

if (countslider == -limitslider) {
jQuery(".container-slider").css({"transform":"translateX(0vw)"});
countslider = 0;
}
else {
var translatevalue = countslider - 100;
jQuery(".container-slider").css({"transform":"translateX( " + translatevalue + "vw)"});
countslider = translatevalue;
}
}

jQuery('#btnslider-right').on('click', function(){sliderright()});
$(document).on("pagecreate",function(){
  $("#bloc-divi").on("swipeleft",function(){sliderright()
  });                       
});

function sliderleft() {

if (countslider == 0) {
var translatevalue = -limitslider;
jQuery(".container-slider").css({"transform":"translateX( " + translatevalue + "vw)"});
countslider = translatevalue;
}


else {
var translatevalue = countslider + 100;
jQuery(".container-slider").css({"transform":"translateX( " + translatevalue + "vw)"});

countslider = translatevalue;
}
}

jQuery('#btnslider-left').on('click', function(){sliderleft()});
jQuery('#btnslider-left').on('click', function(){console.log(countslider);});
$(document).on("pagecreate",function(){
  $("#bloc-divi").on("swiperight",function(){sliderleft()
  });                       
});

#bloc-divi{
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}


.container-slider {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-color: grey;
  transition: 0.7s ease;
}


#photo1 {
  width: 50%;
  height: 50%;
  margin-right: auto;
  margin-left: auto;
  margin-top: 10%;
  background-color: blue;
}

#photo2 {
  width: 50%;
  height: 50%;
  margin-right: auto;
  margin-left: auto;
  margin-top: 10%;
  background-color: purple;
}

#photo3 {
  width: 50%;
  height: 50%;
  margin-right: auto;
  margin-left: auto;
  margin-top: 10%;
  background-color: green;
}

#photo3bis {
  width: 50%;
  height: 50%;
  margin-right: auto;
  margin-left: auto;
  margin-top: 10%;
  background-color: green;
}

.legende1 {
  width: 50%;
  height: 10%;
  margin-right: auto;
  margin-left: auto;
  margin-top: 5%;
  background-color: red;
}
.legende2 {
  width: 50%;
  height: 10%;
  margin-right: auto;
  margin-left: auto;
  margin-top: 5%;
  background-color: red;
}

#slider-2 {
  left: 100%;
}
#slider-3 {
  left: 200%;
}
#slider-3bis {
  left: -100%;
}

.btn-sliderS{
  height: 40px;
  width: 30px;
  position: absolute;
  margin-top: calc((100vh - 40px)/2);
  background-color: yellow;
 }
 
.btn-sliderS:hover {
  cursor: pointer;
 }
 
#btnslider-left{
  left: 0;
}
#btnslider-right{
  right: 0;
}

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<div id="bloc-divi">
<div id="slider-1" class="container-slider">
<div id="photo1">
</div>
<div class="legende1">
</div>
<div class="legende2">
</div>
</div>



<div id="slider-2" class="container-slider">
<div id="photo2">
</div>
<div class="legende1">
</div>
<div class="legende2">
</div>
</div>

<div id="slider-3" class="container-slider">
<div id="photo3">
</div>
<div class="legende1">
</div>
<div class="legende2">
</div>
</div>

<div id="slider-3bis" class="container-slider">
<div id="photo3bis">
</div>
<div class="legende1">
</div>
<div class="legende2">
</div>
</div>

<div id="btnslider-left" class="btn-sliderS"><
</div>
<div id="btnslider-right" class="btn-sliderS">>
</div>
</div>

​

Answer 1

我希望这样的问题已经被问过了。

source-1

source-2

或者只使用css：

source-3

body {
/*To hide the horizontal scroller appearing during the animation*/
overflow: hidden;
 }

单击source-3继续