How to make a infinite transition effect on a click slider when arriving at one end ? (transition issue)

January 28, 2021 by admin

I am making a custom slider (photo slider) when you click you go to the next slide. I arrived to pretty descent result BUT

When arriving at one end (right & left) of the slider I can’t figure how to make it transition as if it was an infinite slider, mine just go over all the slide up to the other end.
I thought of making a duplicate slider to transition but can’t make it work.

Do you have any suggestions?

Many thanks

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>