Что ж, я попытался повторно использовать некоторые компоненты и в итоге использовал этот грязный (хакерский) подход.
Я уверен, что есть лучший способ сделать это, но у меня просто нет времени на работупрямо сейчас ... Не стесняйтесь комментировать, если вы не думаете, что это будет полезно, и я удалю ответ, если это так.
$(function() {
//configuration
let width = $('.two').width();
let animationSpeed = 2000;
let pause1 = 4000;
let pause2 = 6000;
let currentSlide = 0;
let currentSlideRight = 0;
let currentSlideLeft = 0;
//cache
let $images = $('.motion-middle').find('img');
let $image = $images[currentSlide];
let $rightImages = $('.motion-right').find('img');
let $rightImage = $rightImages[currentSlideRight];
let $leftImages = $('.motion-left').find('img');
let $leftImage = $leftImages[currentSlideLeft];
$([$image, $rightImage, $leftImage]).show();
setInterval(function() {
anim($image, $images, currentSlide, 'middle');
}, 3500);
setInterval(function() {
anim($leftImage, $leftImages, currentSlideLeft, 'left');
}, 4000);
setInterval(function() {
anim($rightImage, $rightImages, currentSlideRight, 'right');
}, 5500);
function anim(img, imageArray, slideIdx, position) {
$(img).animate({
"margin-left": -width
}, animationSpeed, function() {
nextImg(img, imageArray, slideIdx, position);
});
}
function nextImg(img, imageArray, idx, position){
idx++;
$(img).hide();
// reset
if (idx >= imageArray.length) {
idx = 0;
}
var imgObj;
switch(position){
case 'left':
$leftImage = imageArray[idx];
imgObj = $leftImage;
currentSlideLeft = idx;
break;
case 'middle':
$image = imageArray[idx];
imgObj = $image;
currentSlide = idx;
break;
case 'right':
$rightImage = imageArray[idx];
imgObj = $rightImage;
currentSlideRight = idx;
break;
}
$(imgObj).css("margin-left",0).show();
}
});
html,
body {
margin: 0;
padding: 0;
}
.one {
height: 25rem;
width: 80rem;
background: orange;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
overflow: hidden;
}
.two {
border: 1px solid;
height: 100%;
overflow: hidden;
}
.two>img {
display: none;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="one">
<!-- left -->
<div class='two motion-left'>
<!--image 1-->
<img src="https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1497645355/04-banff-national-park-moraine-lake-canada-150CANADA0617.jpg?itok=O6eAZSSV" alt="">
<!--image 2-->
<img src="https://cdn.theculturetrip.com/wp-content/uploads/2015/11/New-Zealand-%C2%A9-vichie81-Shutterstock.jpg" alt="">
<!--image 3-->
<img src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="">
</div>
<!-- middle -->
<div class='two motion-middle'>
<!--image 1-->
<img src="https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1497645355/04-banff-national-park-moraine-lake-canada-150CANADA0617.jpg?itok=O6eAZSSV" alt="">
<!--image 2-->
<img src="https://cdn.theculturetrip.com/wp-content/uploads/2015/11/New-Zealand-%C2%A9-vichie81-Shutterstock.jpg" alt="">
<!--image 3-->
<img src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="">
</div>
<!-- right -->
<div class='two motion-right'>
<!--image 1-->
<img src="https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1497645355/04-banff-national-park-moraine-lake-canada-150CANADA0617.jpg?itok=O6eAZSSV" alt="">
<!--image 2-->
<img src="https://cdn.theculturetrip.com/wp-content/uploads/2015/11/New-Zealand-%C2%A9-vichie81-Shutterstock.jpg" alt="">
<!--image 3-->
<img src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="">
</div>
</div>