Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   responsive scrollable accordion tabs (https://javascript.ru/forum/dom-window/78318-responsive-scrollable-accordion-tabs.html)

WebMachine 26.08.2019 06:06

responsive scrollable accordion tabs
 
Всем привет. в общем собираю responsive scrollable(slide) accordion tabs на bootstrap'e.

http://pr-demo.96.lt

Возникли следующие сложности:
- почему в tab2 и tab3 содержимое отображается криво? как в полной версии так и в мобильной. Заданные условия к responsive, не срабатывают.

Но при этом в tab1 всё работает как надо!

В чём косяк?

P.S если в tab2 или tab3 попробовать сдвинуть блоки то всё становится на свои места! Что за глюк?

Прошу распишите конкретно что на что заменить. Я новичек будьте милосердны)

WebMachine 26.08.2019 06:17

И как поправить косяк с accordion ? если заметили то изначально в каждом tab'e выбран пакет Standart!

Если нажать на заголовок другого пакета то описание меняется НО, если перейти на другой tab то "все описания" скрываются!

надо чтобы описание не исчезало а оставалось! НО у каждого taba "последний нажатый" пакет.. нет смысла показывать пакет от интернет магазина во вкладке визиток.

Прошу покажите готовое решение. для исправления ошибок. Заранее спасибо и уважения вам ребят.

рони 26.08.2019 08:20

WebMachine,
Цитата:

Сообщение от рони
беда называется есть none, нет размера, 99% сладеров не учитывают того что их поставят на скрытую вкладку.

решение: циклом идти по вкладкам, открывать, устанавливать слайдер для конкретной вкладки.

WebMachine 26.08.2019 12:04

Можно пример или решение? что на что заменить? я новичек

рони 26.08.2019 12:30

WebMachine,
замените всё содержимое kl-custom.js
на это
$(function() {
    var owl = $('.owl-carousel');
    owl.each(function(i, slider) {
        slider = $(slider);
        var parent = slider.parent();
        parent.addClass("show active");
        slider.owlCarousel({
            margin: 10,
            nav: true,
            loop: true,
            responsiveClass: true,
            responsive: {
                0: {
                    items: 1,
                    nav: true
                },
                600: {
                    items: 3,
                    nav: false
                },
                1000: {
                    items: 5,
                    nav: true,
                    loop: false
                }
            }
        })
        i && parent.removeClass("show active");
    })
})

WebMachine 26.08.2019 12:39

Рони. просто красава! спасибо)


Часовой пояс GMT +3, время: 06:17.