javascript - jQuery UI Slider - 在某些点停止并显示隐藏的项目

Question

我正在尝试构建一个导航 slider ，但不知所措。我真正需要的是一个在特定点停止的 slider ，并根据它停止的点显示一个隐藏的项目。

我已经建立了一个非常简单的例子来说明我在 this fiddle 中的意思.

<div id="slider-wrapper">
  <ul>
    <li class="first">Slide 1</li>
    <li class="second">Slide 2</li>
    <li class="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> 

所以需要发生的是默认情况下显示第一个“幻灯片”，但是当您滑动栏并且它到达上方栏上的“Nav 2”(所以基本上每 100 像素就可以)而不是“幻灯片 1”将被隐藏，“幻灯片 2”将出现。此功能也需要反向工作。

我还没有找到任何功能真正符合我需要的东西。任何建议将不胜感激。

Answer 1

检查我的测试。 https://jsfiddle.net/Cuchu/qvotoqkb/3/您需要在滑动条中定义值的宽度和范围。但这是一种解决方法。

html(你需要包含 jquery、jqueryui 和 jqueryuicss)

<div id="slider-wrapper">
  <ul>
    <li id="slide1" class="first">Slide 1</li>
    <li id="slide2">Slide 2</li>
    <li id="slide3">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> 
<form id="reservation">
  <label style="display:none"for="minbeds">Minimum number of beds</label>
  <select name="minbeds" id="minbeds" style="display:none">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
  </select>
</form>

JavaScript

$(function() {
    var select = $( "#minbeds" );
    var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
      min: 1,
      max: 7,
      range: "min",
      value: select[ 0 ].selectedIndex + 1,
      slide: function( event, ui ) {
        $("#slider-wrapper ul li").hide();
        $("#slide"+ui.value).show();
        console.log(ui.value);
        select[ 0 ].selectedIndex = ui.value - 1;
      }
    });
    $( "#minbeds" ).change(function() {
      slider.slider( "value", this.selectedIndex + 1 );
    });
  });

和CSS

#slider-wrapper ul li {display:none;}
#slider-wrapper ul li.first {display:block;}

#slider-nav {margin:25px auto; text-align:left;}
#slider-nav ul {padding:0; margin:0; height:0; border-bottom:5px solid #000;}
#slider-nav ul li {display:inline-block; background:red; padding:5px; color:#fff; margin:0 15px 0 0; width:80px; text-align:center;}

#slider {margin:50px 0 0 10px;}