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 */

引导程序标签中的滑动滑块

1 个答案: