javascript - 选项卡内的轮播

Question

我有 4 个选项卡，每个选项卡都包含一个轮播。问题是只有第一个选项卡中的轮播可以正常工作。如果您激活第二个选项卡，轮播 div 将全部折叠。

这是一个带有 bootstrap 3 选项卡和旋转木马“slick”插件的示例:http://www.example.design-way.ro/

我尝试了多个 tabbing 脚本，无论我使用什么，都是同样的问题。 旋转木马在第二个选项卡中运行良好，如果您尝试稍微移动它......然后它会以某种方式激活。

这是插件初始化问题吗？以下是我的做法:

    $('.carousel').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        dots: false,
        arrows: true
    });

请给我一些解决方案或想法，让这个轮播正常工作。我尝试调整 css 但没有结果。

Answer 1

我在有 3 个选项卡时遇到过这个问题，每个选项卡都包含一个轮播。 问题: 问题是只有第一个选项卡中的轮播可以正常工作。 如果您激活第二个选项卡，轮播 div 将全部折叠。

解决方案: 邮寄给脚本作者寻求帮助后。我们有决心:

1. 首先移动所有 CSS 文件，然后移动所有 js 文件
2. 先启动 Carousel 的 javascript，然后启动 Tabs

我的示例使用了以下脚本: + TAB 脚本:Simple-Tabbed-Content-Slider-Plugin-For-jQuery-tabbedcontent 演示:http://www.racotecnic.com/tutorials/tabbedcontent/demo.html 下载:http://www.jqueryscript.net/demo/Simple-Tabbed-Content-Slider-Plugin-For-jQuery-tabbedcontent/#tab-1 + 轮播脚本:als.musings.it