Использование миниатюрного слайдера с jquery пользовательскими вкладками на событии смены вкладок - PullRequest
Новая
       14

Использование миниатюрного слайдера с jquery пользовательскими вкладками на событии смены вкладок

0 голосов
/ 28 января 2020

У меня есть вопрос. Я строю простые вкладки - элемент слайдера. Родителем являются вкладки с jquery пользовательскими вкладками как для надписи, так и для панелей. Внутри панелей каждая из них содержит уникальный контейнер, но с одной и той же оболочкой (.listing), которая состоит из слегка отличающейся структуры DOM внутри, но у них одинаковый макет элемента карточки basi c (миниатюра и card-text / body).

Проблема в том, что я использую крошечный слайдер, он отлично работает на первой вкладке. Но когда я переключился на другие вкладки, я обнаружил, что класс 'list-item', который является дочерним по отношению к 'lists', не имеет класса tns-item (как он должен быть добавлен, когда tns активен). Поэтому я думаю, что проблема заключается в том, что мне нужно повторно инициировать tns для каждого события изменения вкладки. Тем не менее, я использую событие активации ui-tabs с basi c tns create, и оно не сработало.

Вот как я сделал свой слайдер: 

var slider = tns({
      container: '.listings',
      items: 4,
      slideBy: 'page',
      autoplay: true,
      controlsContainer: '.slide-nav',
      nav: false,
      mouseDrag: true,
      gutter: 14,
      responsive: {
        0 : {
          items: 1,
        },
        640: {
            items: 2,
        },

        768: {
            items: 3,
        },

        992: {
          items: 4,
        },
      }
    });

И это как я сделал вкладки: 

    jQuery( document ).ready( function( $ ){
    $( "#hometabs" ).tabs({
        fx : {
            opacity: 'toggle'
        },
        activate : function(event, ui) {
            console.log('hometabs');
            var slider = tns({
                container: '.listings',
                items: 4,
                slideBy: 'page',
                autoplay: true,
                controlsContainer: '.slide-nav',
                nav: false,
                mouseDrag: true,
                gutter: 14,
                responsive: {
                    0 : {
                        items: 1,
                    },
                    640: {
                            items: 2,
                    },

                    768: {
                            items: 3,
                    },

                    992: {
                        items: 4,
                    },
                }
            });               
        }
    });
});

Селектор вкладок с идентификатором #hometabs и оболочкой ползунка .listings

Спасибо за помощь

...