圆滑的旋转木马选择选项

Question

Hi i want to link a carrousel to a input value option how can i do that ?

here is my carrousel :

$('.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
});

and my input value :

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

the slider-for will contain image i want to link with the input value

so i want my value to be change and synchronize with the "slide-for"

Answer 1

You have to use afterChange event, it will fire after any slide change, and then you can use currentSlide parameter to get the active slide (img) and then update your input value, here is a working example:

 $(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="">