选项卡更改后滑块滑块中断，滑块导航不同步

Question

我在Bootstrap 4标签导航中使用了多个光滑滑块。

在Rory McCrossan（https://stackoverflow.com/a/48400449/1788961）得到一个很好的答案后，滑块在隐藏的容器内运行良好。

但我需要它与两个标签内容区域结合使用。 如果我使用两个内容区域，滑块会再次中断。我想这与行.first().trigger('shown.bs.tab');和参数.first有关？！

下一个问题是，滑块之间的同步不起作用。 在第一个示例中，同步工作正常。在具有两个内容区域的第二个示例中，它不起作用。是因为两个滑块周围的Div还是因为选择了活动的标签/滑块？

奇怪的是，如果我使用第二个示例的第一个滑块中的点导航，则同步在我的网站上运行（不是JSFiddle）。如果我使用第二个滑块的箭头，它不起作用？！

有什么方法可以解决这个问题吗？我尝试了很多东西，但无法让它发挥作用。

以下是JSFiddle上的示例：http://jsfiddle.net/vv4j3uz2/9/

这是我的代码：

HTML：

<div class="container">

  <h1>
   Working sync between the two sliders
  </h1>
    <div class="slider slider-test-images">
        <div><img src="http://via.placeholder.com/1242x600?text=test" class="img-fluid"></div>
        <div><img src="http://via.placeholder.com/1242x600?text=test" class="img-fluid"></div>
        <div><img src="http://via.placeholder.com/1242x600?text=test" class="img-fluid"></div>
        <div><img src="http://via.placeholder.com/1242x600?text=test" class="img-fluid"></div>
    </div>

    <div class="slider slider-test">
        <div>
            <p class="h1">test 1</p>
        </div>
        <div>
            <p class="h1">test 2</p>
        </div>
        <div>
            <p class="h1">test 3</p>
        </div>
        <div>
            <p class="h1">test 4</p>
        </div>
    </div>

  <h1>
  Sync between sliders not working
  </h1>
    <div class="tab-content" id="ueberTabSlider">
        <div class="tab-pane fade home show active" id="home_slider" role="tabpanel" aria-labelledby="home-tab">
            <div class="slider slider-home-images">
                <div><img src="http://via.placeholder.com/1242x600?text=home" class="img-fluid"></div>
                <div><img src="http://via.placeholder.com/1242x600?text=home" class="img-fluid"></div>
                <div><img src="http://via.placeholder.com/1242x600?text=home" class="img-fluid"></div>
                <div><img src="http://via.placeholder.com/1242x600?text=home" class="img-fluid"></div>
            </div>
        </div>
        <div class="tab-pane fade profile" id="profile_slider" role="tabpanel" aria-labelledby="profile-tab">
            <div class="slider slider-profile-images">
                <div><img src="http://via.placeholder.com/1242x600?text=profile" class="img-fluid"></div>
                <div><img src="http://via.placeholder.com/1242x600?text=profile" class="img-fluid"></div>
                <div><img src="http://via.placeholder.com/1242x600?text=profile" class="img-fluid"></div>
                <div><img src="http://via.placeholder.com/1242x600?text=profile" class="img-fluid"></div>
                <div><img src="http://via.placeholder.com/1242x600?text=profile" class="img-fluid"></div>
            </div>
        </div>
        <div class="tab-pane fade contact" id="contact_slider" role="tabpanel" aria-labelledby="contact-tab">
            <div class="slider slider-contact-images">
                <div><img src="http://via.placeholder.com/1242x600?text=contact" class="img-fluid"></div>
                <div><img src="http://via.placeholder.com/1242x600?text=contact" class="img-fluid"></div>
                <div><img src="http://via.placeholder.com/1242x600?text=contact" class="img-fluid"></div>
            </div>
        </div>
    </div>

    <div class="nav-detail">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item"><a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">home</a></li>
            <li class="nav-item"><a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">profile</a></li>
            <li class="nav-item"><a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">contact</a></li>
        </ul>
    </div>

    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active home" id="home" role="tabpanel" aria-labelledby="home-tab">
            <div class="slider slider-home">
                <div>
                    <p class="h1">home 1</p>
                </div>
                <div>
                    <p class="h1">home 2</p>
                </div>
                <div>
                    <p class="h1">home 3</p>
                </div>
                <div>
                    <p class="h1">home 4</p>
                </div>
            </div>
        </div>
        <div class="tab-pane fade profile" id="profile" role="tabpanel" aria-labelledby="profile-tab">
            <div class="slider slider-profile">
                <div>
                    <p class="h1">profile 1</p>
                </div>
                <div>
                    <p class="h1">profile 2</p>
                </div>
                <div>
                    <p class="h1">profile 3</p>
                </div>
                <div>
                    <p class="h1">profile 4</p>
                </div>
                <div>
                    <p class="h1">profile 5</p>
                </div>
            </div>
        </div>
        <div class="tab-pane fade contact" id="contact" role="tabpanel" aria-labelledby="contact-tab">
            <div class="slider slider-contact">
                <div>
                    <p class="h1">contact 1</p>
                </div>
                <div>
                    <p class="h1">contact 2</p>
                </div>
                    <div>
                    <p class="h1">contact 3</p>
                </div>
            </div>
        </div>
    </div>
</div>

JS：

$('a[data-toggle="tab"]').on('shown.bs.tab', function() {
    $($(this).attr('href')).find('.slider').slick({
        prevArrow: '<button type="button" class="slick-prev"><i class="icon-pfeil_ueber_uns_links"></i></button>',
        nextArrow: '<button type="button" class="slick-next"><i class="icon-pfeil_ueber_uns_rechts"></i></button>',
  })
}).first().trigger('shown.bs.tab');


$('.slider-test-images').slick({
    asNavFor: '.slider-test',
    dots: true,
    arrows: false,
});

    $('.slider-test').slick({
        asNavFor: '.slider-test-images',
    });


$('.slider-home-images').slick({
    asNavFor: '.slider-home',
    dots: true,
    arrows: false,
});

    $('.slider-home').slick({
        asNavFor: '.slider-home-images',
    });

$('.slider-profile-images').slick({
    asNavFor: '.slider-profile',
    dots: true,
    arrows: false,
});

    $('.slider-profile').slick({
        asNavFor: '.slider-profile-images',
    });

$('.slider-contact-images').slick({
    asNavFor: '.slider-contact',
    dots: true,
    arrows: false,
});

    $('.slider-contact').slick({
        asNavFor: '.slider-contact-images',
    });