Question

我试图将光滑的滑块同步到HTML选择并且很难用它。

这是我的代码：

$(function() {    
    $('.slick-slider').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: false,
        autoplay: false,
        draggable: false,
        arrows: false,
        swipe: false,
        speed: 200,
        fade: true,
        lazyLoad: 'progressive',
        cssEase: 'linear'
    });
    var select = $("#select");
    var $carousel = $('.slick-slider');
    $("#select").change(function() {
        goTo = select.selectedIndex;
        $carousel.slick("goTo", goTo);
    });
});

有相同数量的选项/幻灯片。

我一直在尝试不同的事情，但由于我非常无知的JavaScript，我仍然坚持......

https://jsfiddle.net/70he30n1/

- ＆GT;＆GT;＆GT;解决方案：https://jsfiddle.net/gpuubf5y/7/

Answer 1

你可以试试这个：

$( function() {

  var $carousel = $('.slick-slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    infinite: false,
    autoplay: false,
    draggable: true,
    arrows: false,
    swipe: true,
    speed:200,
    fade: true,
    lazyLoad: 'progressive',
    cssEase: 'linear'
  });
  var select = $("#select");
  $("#select").change( function() {      
    goTo = select.val();
    console.log( goTo );
    $carousel.slick( "goTo", goTo-1 );
  });
});

工作演示：https://jsfiddle.net/gpuubf5y/

Answer 2

您不需要通过jQuery访问本机属性。如果您更改选择分配以获取实际元素，请执行以下操作：

...
var $carousel = $('.slick-slider');
var select;
select = $("#select").change(function() {
    goTo = select.selectedIndex;
    $carousel.slick("goTo", goTo);
})[0];// array notation returns native
...

然后您的其余代码应该无需使用prop()。

Answer 3

引用所选选项的索引使用

goTo = $("#select option:selected").index();

光滑的轮播同步选择

3 个答案: