圆滑的轮播同步选择

问题描述

我正在尝试将一个光滑的滑块同步到HTML选择，并且很难.

I'm trying to sync a slick slider to an HTML select and having quite a hard time with it.

这是我的代码:

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

选项/幻灯片数量相同.

There is the same amount of options/slides.

我一直在尝试不同的方法，但是由于我对JavaScript相当无知，所以我仍然陷于困境.

I've been trying different things but since I'm quite ignorant JavaScript wise, I'm still stuck..

https://jsfiddle.net/70he30n1/

->>>解决方案: https://jsfiddle.net/gpuubf5y/7/

推荐答案

您可以尝试以下方法:

$( 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/

这篇关于圆滑的轮播同步选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！