Слайдер на вкладках Bootstrap

Question

Я использую два ползунка внутри компонента Bootstrap Tabs. Ползунки работают нормально для активной вкладки, но нет, если я изменю вкладку. Смотрите здесь: https://codepen.io/cray_code/pen/PxwdvQ

Могу ли я что-нибудь сделать, чтобы предотвратить это?

Вот код HTML:

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item"><a class="nav-link active" id="games-tab" data-toggle="tab" href="#games" role="tab" aria-controls="games" aria-selected="true">Games</a></li>
    <li class="nav-item"><a class="nav-link " id="movies-tab" data-toggle="tab" href="#movies" role="tab" aria-controls="movies" aria-selected="false">Movies</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="games" role="tabpanel" aria-labelledby="games-tab">

        <div class="slider-games">
            <div>
                <h1>Headline</h1>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
            </div>
            <div>
                <h1>Headline</h1>
                <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
            </div>
            <div>
                <h1>Headline</h1>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
            </div>
            <div>
                <h1>Headline</h1>
                <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
            </div>
        </div>

    </div>
    <div class="tab-pane " id="movies" role="tabpanel" aria-labelledby="movies-tab">
        <div class="slider-movies">
            <div>
                <h1>Headline</h1>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
            </div>
            <div>
                <h1>Headline</h1>
                <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
            </div>
            <div>
                <h1>Headline</h1>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
            </div>
            <div>
                <h1>Headline</h1>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
            </div>
        </div>
    </div>
</div>

А вот и JavaScript:

$('.slider-games').slick({
    dots: false,
    arrows: true,
    slidesToShow: 2,
});

$('.slider-movies').slick({
    dots: false,
    arrows: true,
    slidesToShow: 2,
});

Answer 1

Я нашел решение здесь: https://github.com/kenwheeler/slick/issues/619#issuecomment-67228390

Вам нужен следующий код:

/* bootstrap hack: fix content width inside hidden tabs */
.tab-content > .tab-pane,
.pill-content > .pill-pane {
    display: block;     /* undo display:none          */
    height: 0;          /* height:0 is also invisible */ 
    overflow-y: hidden; /* no-overflow                */
}
.tab-content > .active,
.pill-content > .active {
    height: auto;       /* let the content decide it  */
} /* bootstrap hack end */