javascript - jQuery Tabs 使用 Mobify 在 Carousel 上激活

Question

我需要能够在我的 Carousel 上方有一个选项卡菜单，单击该菜单会将 carousel 移动到 carousel 中的关联包。

此外，当滑动转盘时，选项卡将相应地移动到您滑动到的包。因此，如果您滑动，事件标签将会改变，反之亦然。

我制作了一个演示，除了链接选项卡和轮播外，所有的工作都在进行中。我完全不知道该怎么做。

我的演示代码和示例:- http://jsfiddle.net/jnYs7/

<ul id="navlist">
   <li>BASIC</li>
   <li class="activeStep">STANDARD</li>
   <li>SUPER</li>
   <li>ANTOHER</li>
</ul>

插件正在使用: http://www.mobify.com/mobifyjs/modules/carousel-examples/

希望有人能帮帮忙。谢谢

Answer 1

一个例子:http://jsfiddle.net/jnYs7/3/

我所做的是移动 #navlist在.m-carousel里面并添加了 <a>与 data-slide='number_here'属性为 <a> , 使其成为分页。我也改变了你的activeStep类名到m-active .

现在您只需要设置样式即可。

更新 http://jsfiddle.net/jnYs7/10/

更改 margin-right这里定义div之间的距离

.m-center:not(.m-fluid) > .m-carousel-inner > *:not(:first-child),
.m-center:not(.m-fluid) > .m-carousel-inner > *:not(:last-child){
    position: relative;
    float: left;
    left:40px;
    margin-left:0px;
    margin-right:-30px;
}

我没有找到任何关于起点的引用，但你可以使用类似 .trigger() 的东西来自 jquery，将触发链接上的点击事件

$('#navlist li:eq(2) a').trigger('click'); 
//:eq() is the index of li (in this case super)

在更新的 fiddle 中，我总体上更改了一些 css，比较 fiddle 是否缺少 CSS。