click event wewnątrz setIntrval Opcje

[eFK]

Witam serdecznie

Tworzę takie małe menu w postaci obrazkowego, przewijanego strzałkami slaydera, w którym po naciśnięciu na strzałkę następne pierwszy element znika robiąc miejsce dla kolejnych, ukrytych za granicami div-a.

[HTML] pobierz, plaintext 
 
    $("nav, nav .container, nav.container ul").css({"height":160,"overflow":"hidden"});
    $("nav .container ul li a").css({"width":160,"height":160});
 
    $onPage=Math.floor(($('nav .container').width())/165);  //zmienna potrzebna do obliczania ile divów ma zostać na stronie aby całe menu nie znikło
 
//po kliknięciu na div#next pobierane jest kliknięte 'a' z kolejnymi indexami, aby je usunąć tworząc miejsce dla elementu ukrytego wcześniej za krawędziami div.container
    var this_i={i:1};
    $('#next').click(function(){
        if(this_i.i<=$('nav .container ul li').length-$onPage){
        $('nav .container ul li:nth-child('+this_i.i+') a').animate({'width':0,'height':0,'fontSize':0},300,function(){this_i.i=this_i.i+1;$(this).css({'display':'none'});});
        }
    });
 
//przeciwnie do tego wyżej
    $('#prev').click(function(){
        if(this_i.i>1){
            this_i.i=this_i.i-1;
            $('nav .container ul li:nth-child('+this_i.i+') a').css({'display':'table-cell'}).animate({'width':160,'height':160,'fontSize':"175%"},300);    
        }
    });
 
[HTML] pobierz, plaintext 

Zmienna $onPage służy do zabezpieczenia, aby całe menu nie znikło, i zawsze dana ilość elementów pozostała na stronie. Niestety problem pojawia się w momencie zmniejszania przeglądarki, menu nie jest responsywne. Po zmniejszeniu okna przeglądarki nie da się oczywiście zobaczyć wszystkich elementów menu (jeżeli onPage=6, a pozycji li w .container 8, to zawsze będzie się blokować na 2 elemencie - w przypadku pokazywania kolejnych pozycji, a nie cofania- więc gdy okno przeglądarki zostanie pomniejszone tak, ze widoczne są na nim tylko np. 2 elementy, to menu przesunie się tylko o 2 pozycje nie pokazując aż czterech pozycji)

Aby temu zaradzić chcę skorzystać z setInterval. Niestety jeżeli jeżeli tylko $onPage włożę w setInterval to nic to nie daje, bo w dalszej części kodu nie jest on widoczny dynamicznie. Jeżeli wraz z $("#next").click..., $("#prev").click... to po naciśnięciu na div#next/div#prev wszystko wykonuje się po kilka razy , albo wcale. Click działa bardzo dziwnie. Jedyna podpowiedz jaką do tej pory znalazłam to użycie .on, a następnie .off wewnątrz setInterval, jednak wtedy wszystko odbywa się automatycznie, bez kliknięcia na divy.

Czy możecie mi coś poradzić? Znacie jakieś rozwiązanie tego problemu? Czy da się normalnie użyć click wewnątrz setInterval?
Z góry dziękuje za wszystkie wskazówki.

Ten post edytował eFK 28.02.2017, 15:32:19

[guilty82]

A po co setInterval? Wylicz sobie zmienne na nowo przy resize elementu: https://api.jquery.com/resize/

[trueblue]

https://css-tricks.com/the-priority-navigation-pattern/ -> See the Pen Greedy Navigation...