За последние 24 часа нас посетили 19452 программиста и 1626 роботов. Сейчас ищут 1784 программиста ...

Косяк в слайдере (ракусели)

Тема в разделе "JavaScript и AJAX", создана пользователем TeslaFeo, 11 май 2016.

  1. TeslaFeo

    TeslaFeo Старожил

    С нами с:
    9 мар 2016
    Сообщения:
    2.984
    Симпатии:
    759
    Всем привет!

    Да, я знаю, что в интернете куча готовых решений этой задачи, но всё же хочется сделать самому. тем более что уже почти готово.

    Сразу скажу, что всё работает нормально, за исключением одной детали - если на предпоследнем слайде резко нажать два раза вправо, то слайдер смещается за пределы дозволенного, так как на момент проверки - отступ допустимый. Надеюсь всё понятно изложил.

    Вот код:

    Код (Javascript):
    1. // JQuery !
    2. $('#RArr').click(function(){ // При клике на стрелку "вправо"
    3.  
    4.     var wid = $(window).width(); //получаем ширину окна, так как один слайд - на всю ширину окна
    5.     var MaxPd = wid*4*(-1); // всего 5 слайдов, поэтому минимальный marginLeft может быть таким
    6.     var pad = $('#sldr').css('marginLeft').replace('px',''); // получаем текущий marginLeft
    7.      
    8.     if (pad <= MaxPd) { // если текущий marginLeft меньше или равен максимальному
    9.      
    10.         $('#sldr').animate({opacity:"0"}, 250, function(){ // то делалем "эффектный" возворат к первому слайду
    11.          
    12.             $('#sldr').css({'marginLeft':'0'});
    13.             $('#sldr').animate({opacity:"1"}, 250);
    14.          
    15.         });
    16.      
    17.     } else { // иначе просто двигаем слайд куда попросил пользователь.
    18.      
    19.         $('#sldr').animate({marginLeft:"-=100%"},500);
    20.      
    21.     }
    22.  
    23. });
    Прошу совета, как решить проблему...

    заранее благодарю!
     
  2. artoodetoo

    artoodetoo Суперстар
    Команда форума Модератор

    С нами с:
    11 июн 2010
    Сообщения:
    11.116
    Симпатии:
    1.244
    Адрес:
    там-сям
    То есть из-за того, что второй клик в процессе animate случается? Если так, то по клику делай флажек, что кнопка недоступна, а в завершении анимации снова разрешай.
     
  3. artoodetoo

    artoodetoo Суперстар
    Команда форума Модератор

    С нами с:
    11 июн 2010
    Сообщения:
    11.116
    Симпатии:
    1.244
    Адрес:
    там-сям
     
  4. TeslaFeo

    TeslaFeo Старожил

    С нами с:
    9 мар 2016
    Сообщения:
    2.984
    Симпатии:
    759
    дело в том, что в роли кнопки - обычный блок с картинкой. Что значит сделать недоступной? Может быть можно как то функцию заблокировать на это время?
     
  5. artoodetoo

    artoodetoo Суперстар
    Команда форума Модератор

    С нами с:
    11 июн 2010
    Сообщения:
    11.116
    Симпатии:
    1.244
    Адрес:
    там-сям
    ну например,
    Код (Text):
    1. var available = true;
    2. $('#RArr').click(function(){ // При клике на стрелку "вправо"
    3.   if (!available) return;
    4.   available = false;
    5.   ...
     
    TeslaFeo нравится это.
  6. TeslaFeo

    TeslaFeo Старожил

    С нами с:
    9 мар 2016
    Сообщения:
    2.984
    Симпатии:
    759
    @artoodetoo а можно пояснить как это работает? или ссылку на почитать...
    хотелось бы понять как созданная переменная связанна с функцией...
     
  7. TeslaFeo

    TeslaFeo Старожил

    С нами с:
    9 мар 2016
    Сообщения:
    2.984
    Симпатии:
    759
    ааа.. я понял как это работает... спасибо большое @artoodetoo!