スライダー内のスライダー

Question

私はユーザーがスワイプ/スライドすることができるモバイルウェブサイトにslick.jsスライダーを使用しています。

これらのビューの1つでは、画像用に別のスライダーを表示する必要があります。問題は、画像ギャラリーをスライドすると、メインスライドがアクティブになり、逆も同様です。私は各スライダーに違った名前を付けましたが、私が 'イメージギャラリー'とやりとりしているときに 'ビッグスライダー'を無効にする方法を見つけることができません。

<div class="carousel"> 
    <div>View 1</div> 
    <div>Vliew 2 
     <div class="carousel2"> 
      <div>Image 1</div> 
      <div>Image 2</div> 
      <div>Image 3</div> 
     </div> 
    <div> 
<div>View 3</div> 
</div> 

目標は「carousel2」がと相互作用したとき、カルーセルが移動すべきではないということです、そしてcarousel1がと相互作用したとき、carousel2は移動しないでください。

は、ここで私がやったものです。

どのようにこれを達成するためのアイデアですか？ http://jsfiddle.net/q1qznouw/471/

Answer 1

あなたはマウスがcarousel2

$('.carousel').slick(); 

    $('.carousel2').slick(); 

    $('.carousel2').on("mousedown mouseup", function() { 
    $('.carousel').slick("slickGoTo", 1); 
    }); 

と対話するときに、現在のスライドに滞在するcarousel1を強制することができこれは

http://jsfiddle.net/q1qznouw/468/