Всем привет. У меня есть код слайдера, реализованный с помощью ооп, но есть некоторые неполадки в коде, а именно, если переход начинается с первого слайда и идет дальше сам, то на последнем слайде он выходит за рамки, но в то же время если на последнем слайде нажать кнопку следующий слайд, то он переходит на первый, как и требуется. И еще был бы очень благодарен, если бы вы откорректировали мой ооп код.
Заранее благодарю за помощь.
var slideWrapper = function() {
this.slideNow = 1;
this.translateWidth = 0;
this.slideCount = $('#slider').children().length;
this.nextSlide = function() {
if (this.slideNow == this.slideCount || this.slideNow <= 0 || this.slideNow > this.slideCount) {
$('#slider').css('transform', 'translate(0, 0)');
this.slideNow = 1;
}
else {
this.translateWidth = -$('#viewport').width() * (this.slideNow);
$('#slider').css({
'transform': 'translate(' + this.translateWidth + 'px, 0)',
'-webkit-transform': 'translate(' + this.translateWidth + 'px, 0)',
'-ms-transform': 'translate(' + this.translateWidth + 'px, 0)'
});
this.slideNow++;
}
};
this.prevSlide = function() {
if (this.slideNow == 1 || this.lideNow <= 0 || this.slideNow > this.slideCount) {
this.translateWidth = -$('#viewport').width() * (this.slideCount - 1);
$('#slider').css({
'transform': 'translate(' + this.translateWidth + 'px, 0)',
'-webkit-transform': 'translate(' + this.translateWidth + 'px, 0)',
'-ms-transform': 'translate(' + this.translateWidth + 'px, 0)'
});
this.slideNow = this.slideCount;
}
else {
this.translateWidth = -$('#viewport').width() * (this.slideNow - 2);
$('#slider').css({
'transform': 'translate(' + this.translateWidth + 'px, 0)',
'-webkit-transform': 'translate(' + this.translateWidth + 'px, 0)',
'-ms-transform': 'translate(' + this.translateWidth + 'px, 0)'
});
this.slideNow--;
}
};
};
$(document).ready(function() {
var slideInterval = 3000;
var navButtonId = 0;
var mainSlideWrapper = new slideWrapper();
var switchInterval = setInterval(mainSlideWrapper.nextSlide, slideInterval);
$('#viewport').hover(function() {
clearInterval(switchInterval);
}, function() {
switchInterval = setInterval(mainSlideWrapper.nextSlide, slideInterval);
});
$('#next-button').click(function() {
mainSlideWrapper.nextSlide();
});
$('#prev-button').click(function() {
mainSlideWrapper.prevSlide();
});
$('.slide-nav-button').click(function() {
navButtonId = $(this).index();
if (navButtonId + 1 != mainSlideWrapper.slideNow) {
mainSlideWrapper.translateWidth = -$('#viewport').width() * (navButtonId);
$('#slider').css({
'transform': 'translate(' + mainSlideWrapper.translateWidth + 'px, 0)',
'-webkit-transform': 'translate(' + mainSlideWrapper.translateWidth + 'px, 0)',
'-ms-transform': 'translate(' + mainSlideWrapper.translateWidth + 'px, 0)'
});
mainSlideWrapper.slideNow = navButtonId + 1;
}
});
});
Вот код HTML
<!DOCTYPE html>
<html>
<head>
<title>Slider</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<link rel="shortcut icon" href="#">
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div id="block-for-slider">
<div id="viewport">
<ul id="slider">
<li class="slide"><img src="img/img1.jpg" alt="1" class="slide-img"></li>
<li class="slide"><img src="img/img2.jpg" alt="2" class="slide-img"></li>
<li class="slide"><img src="img/img3.jpg" alt="3" class="slide-img"></li>
</ul>
<div id="buttons">
<div id="prev-button"></div>
<div id="next-button"></div>
</div>
<ul id="nav-buttons">
<li class="slide-nav-button"></li>
<li class="slide-nav-button"></li>
<li class="slide-nav-button"></li>
</ul>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
