Доброго времени суток, у меня есть рабочий код слайдера jQuery на функциях, но мне нужно реализовать его с помощью классов. С jQuery знаком буквально 1 день, по-этому не выходит у меня решить эту проблему. Буду благодарен за помощь.
var slideNow = 1;
var slideCount = $('#slider').children().length;
var slideInterval = 3000;
var navButtonId = 0;
var translateWidth = 0;
$(document).ready(function() {
var switchInterval = setInterval(nextSlide, slideInterval);
$('#viewport').hover(function() {
clearInterval(switchInterval);
}, function() {
switchInterval = setInterval(nextSlide, slideInterval);
});
$('#next-button').click(function() {
nextSlide();
});
$('#prev-button').click(function() {
prevSlide();
});
$('.slide-nav-button').click(function() {
navButtonId = $(this).index();
if (navButtonId + 1 != slideNow) {
translateWidth = -$('#viewport').width() * (navButtonId);
$('#slider').css({
'transform': 'translate(' + translateWidth + 'px, 0)',
'-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
'-ms-transform': 'translate(' + translateWidth + 'px, 0)',
});
slideNow = navButtonId + 1;
}
});
});
function nextSlide() {
if (slideNow == slideCount || slideNow <= 0 || slideNow > slideCount) {
$('#slider').css('transform', 'translate(0, 0)');
slideNow = 1;
}
else {
translateWidth = -$('#viewport').width() * (slideNow);
$('#slider').css({
'transform': 'translate(' + translateWidth + 'px, 0)',
'-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
'-ms-transform': 'translate(' + translateWidth + 'px, 0)',
});
slideNow++;
}
}
function prevSlide() {
if (slideNow == 1 || slideNow <= 0 || slideNow > slideCount) {
translateWidth = -$('#viewport').width() * (slideCount - 1);
$('#slider').css({
'transform': 'translate(' + translateWidth + 'px, 0)',
'-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
'-ms-transform': 'translate(' + translateWidth + 'px, 0)',
});
slideNow = slideCount;
}
else {
translateWidth = -$('#viewport').width() * (slideNow - 2);
$('#slider').css({
'transform': 'translate(' + translateWidth + 'px, 0)',
'-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
'-ms-transform': 'translate(' + translateWidth + 'px, 0)',
});
slideNow--;
}
}
Вот еще код 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="newcss.css">
<link rel="shortcut icon" href="#">
<script src="jquery-3.3.1.js"></script>
</head>
<body>
<div id="block-for-slider">
<div id="viewport">
<ul id="slider">
<li class="slide"><img src="images/img1.jpg" alt="1" class="slide-img"></li>
<li class="slide"><img src="images/img2.jpg" alt="2" class="slide-img"></li>
<li class="slide"><img src="images/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="newjavascript.js"></script>
</body>
</html>
