javascript - jQuery UI Slider - 根据选择而变化的自定义滑动按钮

Question

我有一个 slider 可以根据需要工作，但我缺少一个步骤。我需要自定义 slider 按钮根据其所在的步骤进行更改。我尝试了很多事情但没有运气。有什么想法吗？

Here is a link to the fiddle

 <div id="slider-wrapper">
  <ul>
    <li class="slide first">Slide 1</li>
    <li class="slide second">Slide 2</li>
    <li class="slide third">Slide 3</li>
  </ul>
</div> 
<div id="slider-nav">
  <ul>
    <li>Nav 1</li>
    <li>Nav 2</li>
    <li>Nav 3</li>
  </ul>
  <div id="slider"></div>
</div> 

Answer 1

您可以使用css方法根据幻灯片位置更新背景。更新 fiddle 中的代码，您将得到如下内容:

$("#slider").slider({
  value: 1,
  min: 1,
  max: 3,
  step: 1,
  change: function(event, ui) {
    $('.slide').fadeOut('500');
    switch(ui.value) {
      case 1:
        $('.slide.first').delay('400').fadeIn('500');
        $('.ui-slider-handle').css('background', "url('/img/logo.png') no-repeat");
        break;
      case 2:
        $('.slide.second').delay('400').fadeIn('500');
        $('.ui-slider-handle').css('background', "url('https://placehold.it/40x40') no-repeat");
        break;
      case 3:
        $('.slide.third').delay('400').fadeIn('500');
        $('.ui-slider-handle').css('background', "url('https://placehold.it/40x40/ff0000/000000') no-repeat");
        break;
    }    
  }
});

我正在使用占位符图像，您可以自行决定更新这些图像。

<强> Demo