使用 Mobify 在 Carousel 上激活 jQuery 选项卡

Question

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

此外，当旋转木马滑动时，选项卡将根据您滑动到的包移动。因此，如果您滑动和反之亦然，活动选项卡将发生变化。

我已经制作了一个演示，除了链接选项卡和轮播外，所有其他操作都可以使用。我完全不知道如何做到这一点。

我的 DEMO 代码和示例：- 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;
}

我没有找到任何对起点的引用，但您可以使用 jquery 中的 .trigger() 之类的东西来触发链接上的点击事件

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

在更新的小提琴中，我整体更改了一些 css，比较小提琴是否缺少 CSS。