0

カルーセルの上にタブ メニューを表示できるようにする必要があります。これをクリックすると、カルーセルがカルーセル内の関連するパッケージに移動します。

また、カルーセルをスワイプすると、スワイプしたパッケージに応じてタブが移動します。したがって、スワイプするとアクティブなタブが変更され、その逆も同様です。

タブとカルーセルをリンクする以外はすべて動作するデモをまとめました。私はこれを行う方法に完全に迷っています。

私のデモコードと例: - 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/

誰かが助けてくれることを願っています。ありがとう

4

1 に答える 1

0

例: http://jsfiddle.net/jnYs7/3/

私がしたことは、 の#navlist内部を移動し、 with属性を に.m-carousel追加して、ページネーションにしました。クラス名も に変更しました。<a>data-slide='number_here'<a>activeStepm-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)

更新されたフィドルでは、全体的にいくつかの CSS を変更しました。欠落している CSS のフィドルを比較してください。

于 2013-05-18T20:29:38.663 に答える