2017-11-23 4 views
1

두 개의 인라인 div에서 수직으로 매끄럽게 작동합니다. 문제는 왼쪽 div에 마우스를 올리면 스크롤이 멈추지 만 올바른 것이 계속되고 나면 슬라이더가 sycronization을 잃어 버리는 것입니다. 단 하나를 유혹 할 때 둘 다 멈출 수있는 방법이 있습니까? (왼쪽 또는 오른쪽?)을 HTML :두 개의 div에서 한 번 마우스로 가리키면 세로 스크롤이 멈추는 것을 어떻게 막을 수 있습니까?

<div class="vertical-scroll"> 
      <!--SCROLL TITLES--> 
      <div class="row"> 
       <div class="col-sm-12 col-md-5"> 
        <h2 class=""> 
         <?php echo $right; ?> 
        </h2> 
       </div> 
       <div class="col-sm-12 col-md-5 col-md-offset-2"> 
        <h2 class=""> 
         <?php echo $left; ?> 
        </h2> 

       </div> 
      </div> 

      <div class="row"> 
       <div class="col-sm-12 col-md-5"> 
        <h2 class="info-title"> 
         <?php echo $right2; ?> 
        </h2> 
       </div> 
       <div class="col-sm-12 col-md-5 col-md-offset-2"> 
        <h2 class=""> 
         <?php echo $left2; ?> 
        </h2> 
       </div> 
      </div> 

     </div> 

jQuery를 : 결국 당신이이기려고하고있다, 그러나 당신이 사용할 수있는 결과 어떤 'asNavFor'하나의 매끄러운을 만들기 위해

jQuery('.vertical-scroll').slick({ 
    slidesToShow: 1, 
    slidesToScroll: 1, 
    autoplay: true, 
    autoplaySpeed: 1000, 
    vertical: true, 
    verticalSwiping: false, 
    touchMove: false, 
    swipe: false, 
    pauseOnHover: true, 
    arrows: false, 
    }); 

답변

1

완전히 확실하지 않음 슬라이더가 다른 슬라이더와 동기화됩니다.

Fiddle

HTML :

<div> 
    <div class="slider-1 text-center"> 
    <div>item1</div> 
    <div>item2</div> 
    <div>item3</div> 
    </div> 
    <div class="slider-2 text-center"> 
    <div>item1</div> 
    <div>item2</div> 
    <div>item3</div> 
    </div> 
</div> 

JS :이 도움이

$(document).ready(function() { 

    $('.slider-1').slick({ 
     vertical:true, 
     slidesToShow: 1, 
     slidesToScroll: 1, 
     autoplay: true, 
     autoplaySpeed: 500, 
     pauseOnHover: true, 
     arrows: false, 
     dots: false, 
     asNavFor: '.slider-2' 
    }); 
    $('.slider-2').slick({ 
     vertical:true, 
     slidesToShow: 1, 
     slidesToScroll: 1, 
     dots: true, 
     focusOnSelect: true, 
     asNavFor: '.slider-1' 
    }); 
}); 

희망!

+0

@ john에게 감사드립니다.하지만 움직일 때 이미 동기화되어 있지만, 마우스를 올리면 하나만 멈 춥니 다. – Mellville

+0

상단에 마우스를 가져 가면 두 가지 모두 멈 춥니 다. 편집 : 업데이트하는 것을 잊어 버렸습니다. 바이올린은 이제 올바른 버전으로 연결되고 위의 내용을 수행합니다. [바이올린] (0128)/ – John

+0

내 마크 업이 잘못 설정되었지만 어쨌든 답변을 주셔서 감사합니다. @john – Mellville