Javascript-форум - Показать сообщение отдельно

goofy1337 · #1 (**permalink**) 13.04.2018, 14:53

Доброго времени суток, у меня есть рабочий код слайдера 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>