Slick 회전 목마 선택 옵션

Question

안녕하세요 저는 회전 값을 입력 값 옵션에 연결하고 싶습니다. 어떻게 할 수 있습니까? 여기

내 회전 목마입니다 :

$('.slider-for').slick({ 
slidesToShow: 1, 
slidesToScroll: 1, 
arrows: false, 
fade: true, 
asNavFor: '.slider-nav' 
}); 

$('.slider-nav').slick({ 
slidesToShow: 3, 
slidesToScroll: 1, 
asNavFor: '.slider-for', 
dots: true, 
centerMode: true, 
focusOnSelect: true 
}); 

내 입력 값 :

<input id="test" name="test" value="changevalue"> 

슬라이더-에 내가 입력으로 연결할 이미지가 포함됩니다 값

그래서 내 값을 변경하고 "슬라이드 용"으로 동기화하십시오

Answer 1

afterChange 이벤트를 사용해야 할 경우 슬라이드 변경 후 실행되고 currentSlide 매개 변수를 사용하여 활성 슬라이드를 가져올 수 있습니다

$(document).ready(function(){ 
 
    
 
    $('.slider-for').slick({ 
 
    slidesToShow: 1, 
 
    slidesToScroll: 1, 
 
    }); 
 
    
 
    var $input = $('#test'); 
 
    
 
    $('.slider-for').on('afterChange', function(event, slick, currentSlide) { 
 
    // get the active slide 
 
    var $activeImg = $("[data-slick-index='" + currentSlide + "']").children('img'); 
 
    // update input value 
 
    $input.val($activeImg.attr('src')); 
 
    });  
 
    
 
    
 
});

.slider-for{ 
 
    margin: 50px; 
 
} 
 

 
#test { 
 
    width: 300px; 
 
} 
 

 
body { 
 
    background: #3498db; 
 
}

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css"/> 
 
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"></script> 
 

 
<div class="slider-for"> 
 
    <div><img alt="" src="http://via.placeholder.com/350x100"></div> 
 
    <div><img alt="" src="http://via.placeholder.com/400x100"></div> 
 
    <div><img alt="" src="http://via.placeholder.com/450x100"></div> 
 
</div> 
 

 
<input id="test" name="test" value="">

: (IMG) 다음 입력 값을 업데이트, 여기에 동작하는 예제입니다