Question

我有一个可以根据需要运行的滑块，但我错过了一步。我需要自定义滑块按钮根据它所处的步骤进行更改。我尝试了多件没有运气的东西。有什么想法吗？

 <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方法根据幻灯片位置更新background。更新你的小提琴代码，你会有这样的事情：

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

jQuery UI Slider - 自定义幻灯片按钮，根据选择进行更改

1 个答案: