Problem z przesuwanym menu w CSS/JS

Witam serdecznie.
Męcze się od paru dni z tym menu: http://serwer1356363.home.pl/pub/sample (dni tygodnia na niebieskim pasku).
Po kliknięciu strzałki w prawo lub lewo nie widać dni sprzed przewijania. Przykładowo po wczytaniu strony ostatnim dniem jest 7.12.
Klikam strzałkę w prawo i pierwszym dniem jest 11.12 (powinien być 8.12). Analogicznie na responsywności.

Wie ktoś może jak można to naprawić?

Tutaj jest efekt jaki bym chciał uzyskać: https://asmyshlyaev177.github.io/react-horizontal-scrolling-menu/ (tylko to react)

Może jakis fragment kodu? wyglada na to że za daleko przesuwasz pasek. Masz jakąś zmienną odpowiedzialną, za to jak daleko ma on sie przesunąć?

Mitek napisał(a):

Może jakis fragment kodu? wyglada na to że za daleko przesuwasz pasek. Masz jakąś zmienną odpowiedzialną, za to jak daleko ma on sie przesunąć?

Nie chciałem dzielić kodu na kawałki dlatego pomyślałem że lepiej będzie to widoczne na "żywym organizmie" :)

Mój kod:

<script>
        $(document).ready(function() {
           
            var hidWidth;
            var scrollBarWidths = 40;

            var widthOfList = function() {
                var itemsWidth = 0;
                $('.list li').each(function() {
                    var itemWidth = $(this).outerWidth();
                    itemsWidth += itemWidth;
                });
                return itemsWidth;
            };

            var widthOfHidden = function() {
                return (($('.wrapper').outerWidth()) - widthOfList() - getLeftPosi()) - scrollBarWidths;
            };

            var getLeftPosi = function() {
                return $('.list').position().left;
            };

            var reAdjust = function() {
                if (($('.wrapper').outerWidth()) < widthOfList()) {
                    $('.scroller-right').show();
                } else {
                    $('.scroller-right').hide();
                }

                if (getLeftPosi() < 0) {
                    $('.scroller-left').show();
                } else {
                    $('.item').animate({
                        left: "-=" + getLeftPosi() + "px"
                    }, 'slow');
                    $('.scroller-left').hide();
                }
            }

            reAdjust();

            $(window).on('resize', function(e) {
                reAdjust();
            });

            $('.scroller-right').click(function() {

                $('.scroller-left').fadeIn('slow');
                $('.scroller-right').fadeOut('slow');

                $('.list').animate({
                    left: "+=" + widthOfHidden() + "px"
                }, 'slow', function() {

                });
            });

            $('.scroller-left').click(function() {

                $('.scroller-right').fadeIn('slow');
                $('.scroller-left').fadeOut('slow');

                $('.list').animate({
                    left: "-=" + getLeftPosi() + "px"
                }, 'slow', function() {

                });
            });
        });

    </script>
<div class="lukMenu2">
                        <div class="scroller scroller-left"><i class="glyphicon glyphicon-chevron-left activeMopTopMenuLeft"></i></div>
                        <div class="scroller scroller-right"><i class="glyphicon glyphicon-chevron-right activeMopTopMenuRight"></i></div>
                        <div class="wrapper">
                            <ul class="nav nav-tabs list lukMenu2LI" id="myTab">
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem callendarTopMenuItemNow">
                                        <div class="callendarTopMenuItem1">01</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem">
                                        <div class="callendarTopMenuItem1">02</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem">
                                        <div class="callendarTopMenuItem1">03</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem">
                                        <div class="callendarTopMenuItem1">04</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem">
                                        <div class="callendarTopMenuItem1">05</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem">
                                        <div class="callendarTopMenuItem1">06</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem">
                                        <div class="callendarTopMenuItem1">07</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem">
                                        <div class="callendarTopMenuItem1">08</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem">
                                        <div class="callendarTopMenuItem1">09</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem">
                                        <div class="callendarTopMenuItem1">10</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem">
                                        <div class="callendarTopMenuItem1">11</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem">
                                        <div class="callendarTopMenuItem1">12</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem">
                                        <div class="callendarTopMenuItem1">13</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem">
                                        <div class="callendarTopMenuItem1">14</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem">
                                        <div class="callendarTopMenuItem1">15</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem">
                                        <div class="callendarTopMenuItem1">16</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem">
                                        <div class="callendarTopMenuItem1">17</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>

Nie chce mi się analizować kodu, ale on chyba pobiera ilość px do przewinięcia z divów na twojej stronie.
Zatem wyświetl sobie, co to za wartości, a potem pomierz ile px ma ten widoczny fragment.
Obstawiam, że nie uwzględniasz jakichś paddingów/marginesów.