Question

我需要能够在我的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()来触发链接上的click事件

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

在更新的小提琴中，我总体上改变了一些CSS，比较缺少CSS的小提琴。

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

1 个答案: