Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.04.2018, 14:53
Интересующийся
Отправить личное сообщение для goofy1337 Посмотреть профиль Найти все сообщения от goofy1337
 
Регистрация: 11.04.2018
Сообщений: 10

Слайдер jQuery на классах
Доброго времени суток, у меня есть рабочий код слайдера 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>
Ответить с цитированием
  #2 (permalink)  
Старый 13.04.2018, 14:58
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,706

goofy1337,
Сообщение от goofy1337
С jQuery знаком буквально 1 день, по-этому не выходит у меня решить эту проблему. Буду благодарен за помощь.
Что у вас не получается переписать?
Ответить с цитированием
  #3 (permalink)  
Старый 13.04.2018, 15:05
Интересующийся
Отправить личное сообщение для goofy1337 Посмотреть профиль Найти все сообщения от goofy1337
 
Регистрация: 11.04.2018
Сообщений: 10

Сообщение от Nexus Посмотреть сообщение
goofy1337,
Что у вас не получается переписать?
Не получается реализовать код jQuery с помощью классов. То есть создать класс и запихнуть туда эти функции с переменными, и правильно вызвать.

Последний раз редактировалось goofy1337, 13.04.2018 в 15:08.
Ответить с цитированием
  #4 (permalink)  
Старый 13.04.2018, 15:14
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,706

goofy1337, ознакомьтесь с этой статьей и все получится: https://learn.javascript.ru/es-class
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
GSAP слайдер без jquery возможно ли? Aleksanderj Библиотеки/Тулкиты/Фреймворки 5 19.09.2015 03:05
Jquery ui-slider & Jquery selectbox, Слайдер срабатывает всего 1 раз Micher jQuery 4 31.01.2014 13:07
Слайдер с помощью CSS и jQuery - 1000 р. stixia007 jQuery 21 27.03.2013 22:44
jquery слайдер, анимация при переключении вкладки KiTaeZa Events/DOM/Window 1 05.09.2011 20:52
jQuery UI Slider - как синхронизировать слайдер со значнием? frightened jQuery 0 24.07.2011 00:19