Javascript - 滑块 (glider.js) 不能与 JS 标签一起使用

如何解决Javascript - 滑块 (glider.js) 不能与 JS 标签一起使用

我用 glider.js 创建了两个产品轮播。两者都在工作。然后我使用了下面的 jQuery 代码，以便两个创建两个选项卡。

<div class="tabs">
  <div id="tab-1"><a href="#tab1">TAB1</a></div>
  <div id="tab-2"><a href="#tab2">TAB2</a></div>
</div>

<div id="tab1">
  <div class="glider" id="glider1">
</div>

<div id="tab2">
  <div class="glider" id="glider2">
</div>

$('.col-tabs').each(function() {
  var $active,$content,$links = jQuery(this).find('a');
  $active = jQuery($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);
  $active.addClass('active');
  $content = jQuery($active[0].hash);
  
  $links.not($active).each(function() {
    jQuery(this.hash).hide();
  });
  
  $(this).on('click','a',function(e) {
    $active.removeClass('active');
    $content.hide();
    $active = jQuery(this);
    $content = jQuery(this.hash);
    $active.addClass('active');
    $content.fadeIn(500);
    e.preventDefault();
  });
});

new Glider(document.getElementById('glider2'),{
draggable: true,responsive: [{breakpoint: 0,settings: {slidesToShow: 2,slidesToScroll: 2}},{breakpoint: 768,settings: {slidesToShow: 3,slidesToScroll: 3}}]
});

这是发生了什么：

• （活动）TAB1 上的滑块有效。
• 切换到 TAB2 时，第二个滑块不起作用。第二个滑块的脚本不会触发。
• 在浏览器控制台中选择滑块 2 时，它突然起作用了。

显然，我对 JS 来说是个门外汉。我假设我需要向第二个滑翔机脚本添加一些内容，以便即使在 TAB2 处于非活动状态时也能加载它。

你能帮忙吗？