Question

我有4个标签，每个标签都包含一个旋转木马。问题是只有第一个标签中的轮播才能正常工作。如果激活第二个选项卡，则轮播div将全部折叠。

这是一个使用bootstrap 3标签和＆＃39; slick＆＃39;旋转木马的插件：http://www.example.design-way.ro/

我尝试了多个标签脚本，无论我使用什么，它都是同样的问题。如果您尝试移动它，旋转木马在第二个标签中工作正常..然后以某种方式激活。

这是一个插件初始化问题吗？以下是我的表现方式：

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

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

Answer 1

我遇到过这个问题什么时候有3个标签，每个标签都包含一个轮播。问题：问题是只有第一个标签中的轮播才能正常工作。如果激活第二个选项卡，则轮播div将全部折叠。

解：邮寄给脚本以获取帮助之后。我们有决心：

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

我的样本使用过以下脚本： + TABs脚本：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

Answer 2

我不熟悉你使用的标签插件，但你应该只在活动（和可见）标签上启用轮播（你应该有一个标签切换回调）

Answer 3

我也遇到了同样的问题。我在这里找到了最好的解决方案：http://jsfiddle.net/phpdeveloperrahul/bejFM/

不仅如此。 bxSlider提供了许多易于理解和使用的选项。我在下一节中提到的一些选项：

mode: 'horizontal',
auto: true,
autoControls: true,
pause: 2000,
maxSlides: 4,
minSlides: 1,
controls: true,
infiniteLoop: true,
moveSlideQty: 1,
slideWidth: 200,
responsive: true,

希望这能满足您的需求。

标签内的轮播

3 个答案: