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

slider-for将包含我想要与输入值链接的图像

所以我希望我的价值能够改变并与“slide-for”

同步

Answer 1

你必须使用afterChange事件，它会在任何幻灯片更改后触发，然后你可以使用currentSlide参数来获取活动幻灯片（img），然后更新你的输入值，这是一个工作示例：

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

光滑的转盘选择选项

1 个答案: