ОК, я получил решение, но я изменил подход.здесь новый код.Я также добавил некоторую отзывчивость к слайдеру.Теперь вместо z-index я проверяю поле left-left, чтобы анимировать контейнер слайдера, а не только 1 слайд за раз, поэтому мне не нужно знать, что это за текущий слайд, чтобы найти следующий, мне просто нужнополе меньше 0 и больше, чем разница между шириной .slide и шириной .slider-wrapper.Таким образом, когда вы щелкаете слева, я вычитаю на полях слева текущую ширину .slide и добавляю ее при щелчке правой кнопкой мыши.Взгляните на функцию resize_slider().Последнее, но не для релевантности, установка .stop() перед .animate() предотвращает наложение анимаций.PS вы можете использовать тот же подход для анимации с помощью CSS-преобразования
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{ margin: 0; padding:0}
.home-slide{
overflow: hidden;
width: 100%;
}
.slide-wrapper {
display: flex;
flex-direction: row;
overflow: hidden;
width: 100%;
height: 80vh;
color: #fff;
}
.slide {
position: relative;
height: 100%;
min-height: 100%;
padding: 100px 40px;
-webkit-transition: linear .5s;
transition: linear .5s;
cursor: pointer;
border: none;
box-sizing: border-box;
font-size: 20px
}
.slide:nth-child(1) {
background-color: #F2358D;
/*--magenta shade--*/
}
.slide:nth-child(2) {
background-color: #04D9B2;
/*--cyne shade--*/
}
.slide:nth-child(3) {
background-color: #F2C53D;
/*--yellow shade--*/
}
.slide:nth-child(4) {
background-color: #6a8aff;
/*--blue shade--*/
}
.slide:nth-child(5) {
background-color: #3FFF42;
/*--green shade--*/
}
.slide-number {
display: flex;
max-width: 100%;
position: absolute;
bottom: 0;
left: 45%;
transform-x: 50%;
text-align: center;
z-index: 999;
}
.slide-number div {
padding: 20px 10px;
opacity: .5;
}
.slide-number div.active {
opacity: 1;
}
</style>
</head>
<body>
<div class="home-slide">
<div class="slide-wrapper">
<div class="slide">slide 1</div>
<div class="slide">slide 2</div>
<div class="slide">slide 3</div>
<div class="slide">slide 4</div>
<div class="slide">slide 5</div>
</div>
</div>
<div class="slide-number">
<div class="active">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<script>
var $numbers,$slides,numSlides,isSliding,currSlide = 1;
console.log('numSlides', numSlides)
$(document).ready(function () {
resizeSlides();
$('.slide').click(function (e) {
var pWidth = $(this).outerWidth(); //use .outerWidth() if you want borders
var pOffset = $(this).offset();
var x = e.pageX - pOffset.left;
console.log($('.slide-wrapper').css('marginLeft'))
var posX = Math.floor(parseInt($('.slide-wrapper').css('marginLeft').replace('px')));
var sliderW = Math.floor($('.slide-wrapper').width())
var direction;
if (pWidth / 2 > x) {
direction = 'left';
} else if (pWidth / 2 < x) {
direction = 'right';
}
console.log('(pWidth - sliderW)',(pWidth - sliderW));
console.log('posX', posX);
console.log('typeof posX', typeof posX);
console.log('pWidth', pWidth);
console.log('sliderW', sliderW);
console.log('(pWidth - sliderW)',(pWidth - sliderW));
if (!isSliding) {
isSliding = true;
if (direction == 'left' && posX < 0) {
$('.slide-wrapper').stop().animate({'marginLeft': '+=' + pWidth + 'px'}, 500, function () {
currSlide--;
$('.slide-number .active').removeClass('active')
$('.slide-number div:nth-child(' + (currSlide) + ')').addClass('active');
isSliding = false;
});
} else if (direction == 'right' && (pWidth - sliderW) < posX) {
$('.slide-wrapper').stop().animate({'marginLeft': '-=' + pWidth + 'px'}, 500, function () {
currSlide++;
$('.slide-number .active').removeClass('active')
$('.slide-number div:nth-child(' + (currSlide) + ')').addClass('active');
isSliding = false;
});
}
setTimeout(function () {
isSliding = false;
}, 500)
}
});
})
$(window).resize(function () {
resizeSlides();
});
function resizeSlides() {
$numbers = $('.slide-number').children();
$slides = $('.slide');
numSlides = $slides.length;
isSliding = false;
currSlide = 1;
var sliderW = Math.floor($('.home-slide').width());
var numSlides = $('.slide-number').children().length;
$('.slide').each(function () {
$(this).outerWidth(sliderW);
});
$('.slide-wrapper').width(sliderW * numSlides);
}
</script>
</body>
</html>