1
J'ai créé un diaporama simple avec un effet de parallaxe où la diapositive en attente chevauche la diapositive en cours. Tout fonctionne bien jusqu'à ce que le cycle du diaporama se termine là où la dernière diapositive se comporte mal et ne réinitialise pas sa position sous la diapositive actuelle comme le reste. Je ne peux pas déterminer pourquoi il se comporte comme ça.Dernière diapositive se chevauchant en premier à la fin du diaporama
var slides = [];
// Append images to the slides array
$('.slide').each(function() {
"use strict";
slides.push($(this));
});
function slideshow() {
"use strict";
var $current = slides[0],
$next = slides[1];
setInterval(function() {
// Slide animation
$current.css('transform', 'translate3d(-30%, 0, 0)');
$next.css('transform', 'translate3d(0, 0, 0)');
// Reorder slides
slides.push($current);
slides.shift();
// Reestablish slide variables
$current = slides[0];
$next = slides[1];
// Reset position of slide
setTimeout(function() {
slides[3].css('transform', 'translate3d(100%, 0, 0)');
setTimeout(function() {
slides[3].css('z-index', 1);
}, 1000);
$current.css('z-index', 0);
}, 1000); // END: setTimeout()
}, 4000); // END: setInterval()
} // END: slideshow()
slideshow();@charset "UTF-8";
/* CSS Document */
body {
margin: 0;
padding: 0;
}
#main-container {
height: 60vh;
width: 100vw;
overflow: hidden;
}
#slide-container {
width: 200vw;
height: 100%;
position: relative;
}
.slide {
background-position: center;
background-size: cover;
width: 50%;
height: 100%;
position: absolute;
transform: translate3d(100%, 0, 0);
z-index: 1;
transition: 1s cubic-bezier(.48, .14, .31, .97);
color: white;
line-height: 60vh;
text-align: center;
font-size: 70px;
}
#slide-1 {
background-image: url(https://media.mnn.com/assets/images/2015/03/forest-path-germany.jpg.653x0_q80_crop-smart.jpg);
transform: translate3d(0, 0, 0);
z-index: 0;
}
#slide-2 {
background-image: url(https://media.treehugger.com/assets/images/2016/03/woodland_trail.jpg.662x0_q70_crop-scale.jpg);
}
#slide-3 {
background-image: url(http://sim02.in.com/4fc598f2c9f2c0cdc5e0decc188d8d10_ft_xl.jpg);
}
#slide-4 {
background-image: url(https://media-cdn.tripadvisor.com/media/photo-s/05/fc/88/f9/waterloop-trail.jpg);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
<div id="slide-container">
<div class="slide" id="slide-1">Slide 1</div>
<div class="slide" id="slide-2">Slide 2</div>
<div class="slide" id="slide-3">Slide 3</div>
<div class="slide" id="slide-4">Slide 4</div>
</div>
</div>