到达一端时如何在点击滑块上制作无限过渡效果？ （过渡问题）

Posted 2023-05-08

【中文标题】到达一端时如何在点击滑块上制作无限过渡效果？ （过渡问题）

【英文标题】：How to make a infinite transition effect on a click slider when arriving at one end ? (transition issue)

【发布时间】：2021-05-02 16:42:39

【问题描述】：

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

当到达滑块的一端（右和左）时，我不知道如何让它像无限滑块一样过渡，我的只是将所有滑块都翻到另一端。 我想制作一个重复的滑块进行过渡，但无法使其工作。

你有什么建议吗？

非常感谢

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>

【参考方案1】：

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

source-2

或者只有css：source-3

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

点击 source-3 继续