Табы на css не разворачивают слайдер ( только после изменения ширины ) как исправить?

Question

[Nikitos08]

Есть два CSS таба в которых лежит по слайдеру с товарами. При переключение на другой таб слайдер просто разрывает пока не изменишь ширину дисплея хоть на пиксель. Ставил табы на js та же проблема.... Менять слайдер? Работа в gif выше + matari.oldsparky.in.ua/rassrochka.html
В JS новичок так, что если что то как для чайника )

<div class="korpus">
              <input type="radio" name="odin" checked="checked" id="vkl1"/><label for="vkl1">Бензиновые</label><input type="radio" name="odin" id="vkl2"/><label for="vkl2">Дизельные</label><input type="radio" name="odin" id="vkl3"/>
                <div style="">
                    <div class="slider-wrapper">
                        <div class="slider slider2">
                            <div>
                                <?php include 'credit/benzinFirstSlide.php' ?>
                            </div>
                        
                            <div>
                                <?php include 'credit/benzinSecondSlide.php' ?>
                            </div>

                            <div>
                                <?php include 'credit/benzinThirdSlide.php' ?>
                            </div>
                        </div>
                    </div> 
                </div>
                
                <div style="">
                    <div class="slider-wrapper">
                        <div class="slider slider2">
                            <div>
                                <?php include 'credit/diselFirstSlide.php' ?>
                            </div>
                                
                            <div>
                                <?php include 'credit/diselSecondSlide.php' ?>
                            </div>

                            <div>
                                <?php include 'credit/diselThirdSlide.php' ?>
                            </div>

                            <div>
                                <?php include 'credit/diselFourthSlide.php' ?>
                            </div>
                        </div>
                    </div> 
                </div>
            </div>

Comments

[Hyubert]

Что это?

jQuery(window).load(function() {
jQuery('#slider').orbit({
animation: 'fade',
directionalNav: true,
animationSpeed: 400,
pauseOnHover: true,
startClockOnMouseOut: true,
startClockOnMouseOutAfter: 800
}
);

});

У Вас работает скрипт от слайдера который не подключен?

[Hyubert]

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

Answer 1

[ozknemoy]

предположу
1. при инициализации карусели когда задается ширина каждого элемента то берется очень маленькая ширина всей карусели(потом делится на количество элементов). а при смене ширины окна responsive функция слайдера пересчитывает карусель заново. была похожая фишка с owl carousel. она тупо считает ширину всего окна, не учитывая отступы слева и справа. у тебя они тоже есть. поройся в доках. возможно есть функция выставления основного контейнера для расчета. по умолчанию похоже берет window
2. карусель выставляет сразу все элементы для показа, а потом только лишь 4 как и должно быть. опять таки функция responsive косячит