滑らかなカルーセル選択オプション

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"> 

スライダーのためのiは入力とリンクしたい画像が含まれています値

私の値が変更され、 "スライド用"と同期するようにしたい

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）してから、入力値を更新し、ここでの実施例であります