使用Slider Ui控制转盘(转到某个值上的某个幻灯片）

Using Slider Ui to control a carousel (to go to a certain slide on a certain value)

本文关键字：幻灯片 Ui Slider 控制 使用      更新时间：2023-09-26

大家早上好，我已经尝试创建这个"东西"有一段时间了，但我的大脑没有跟上！我正在尝试创建一个滑块功能（使用http://jqueryui.com/slider/#steps)当用户选择他们在项目上的花费时，他们单击"计算"，然后将他们带到一个转盘幻灯片，该幻灯片上有与项值相关的信息（它都是用转盘循环2构建的）。

希望我已经解释好了——我在这里演奏了一把超快的小提琴：http://jsfiddle.net/P4FrJ/

<div class="cycle-slideshow" id="s1"
data-cycle-fx="scrollHorz"
data-cycle-timeout="0"
data-cycle-prev="#prev"
data-cycle-next="#next"
data-cycle-slides="> div"
>
<div class="binbarberbg white"> 
<div class="container pagewidth">   
    <div class="col-md-6" id="1" >
      <p> <label for="amount">select amount you spend on *item*:</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"></p>
      <div id="slider"></div>
          <a href="#" class="calculate button" id="calculate">Calculate</a>
    </div>
</div>
</div>
<div id="2" class="slide2">£10</div>
<div id="3" class="slide3">£20</div>   
<div id="4" class="slide2">£30</div>
<div id="5" class="slide3">£40</div>     
<div id="5" class="slide3">£50</div>     
</div>
    <div style="height: 200px; clear: both;"></div>
<div class="center">
<a href="#" id="prev">Prev</a> 
<a href="#" id="next">Next</a>
</div>

   $(function() {
$( "#slider" ).slider({
  value:10,
  min: 10,
  max: 50,
  step: 10,
  slide: function( event, ui ) {
    $( "#amount" ).val( "£" + ui.value );
  }
});
$( "#amount" ).val( "£" + $( "#slider" ).slider( "value" ) );
});
$( ".selector" ).slider({
change: function( event, ui ) {}
});
$( ".selector" ).on( "slidechange", function( event, ui ) {} );

您只需要在#calculate链接上绑定一个点击事件处理程序函数。此函数将检索滑块值，并调用转盘的goto函数，如转盘API：中所述

$('#calculate').click(function(e) {
    // Retrieve the slider value (10, 20, 30, etc.), divide by 10
    // to get the corresponding carousel slide index (0 based)
    // and use the 'goto' function (cf. http://jquery.malsup.com/cycle2/api/)
    $('#s1').cycle('goto', $('#slider').slider('value')/10);
});

我更新了您的jsFiddle，以便在实际操作中显示它。

相关文章：