我想制作一个基于 slider 的图片集，或者可以说是一个基于 slider 的旋转木马。 我想到的 slider 上面有特定的标记，(比如 1990、1995、2000 等等)，并且有一个图像对应于 slider 当前所在的范围(即 1990-1995 的一个图像, 1995-2000 年的另一个，等等)。图像不一定要滑入和滑出视觉。因此，不需要 Bootstrap 旋转木马。
我正在查看的 slider 是 this ，我会根据自己的需要进行修改。
所以，我试图合并这两个概念。 this中显示的两个元素 fiddle 彼此之间没有任何联系。然后我试着mess around with the code , 但旋转木马似乎仍然不受 slider 移动的影响。
这是修改后的代码:
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
#custom-handle {
width: 3em;
height: 1.6em;
top: 50%;
margin-top: -.8em;
text-align: center;
line-height: 1.6em;
}
</style>
<script>
$( function() {
var handle = $( "#custom-handle" );
$( "#slider" ).slider({
create: function() {
var slide_number = Number($(this).slider("value"))/34+1 ;
handle.text( $( this ).slider( "value" ) );
$("#carouselExampleIndicators").data('slide-to',slide_number) ;
},
slide: function( event, ui ) {
var slide_number = Number(ui.value)/34+1 ;
handle.text( ui.value );
$("#corouselExampleIndicators").data('slide-to',slide_number) ;
}
});
} );
</script>
</head>
<div id="carouselExampleIndicators" class="carousel slide" >
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://i.imgur.com/S7Hebtq.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://procutlandscaping.com/blog/wp-content/uploads/2012/06/landscape-design-rockland-county.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://4.bp.blogspot.com/-7Tjc6muCHKc/UIToU_6RXeI/AAAAAAAAC4Q/2iE7Cb0m5ZU/s1600/Beautiful+-Landscape-+HD-+Wallpapers3.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<script>
$(function(){
$('#carouselExampleIndicators').carousel();
});
</script>
</div>
<div>
<br><br>
</div>
<div id="slider">
<div id="custom-handle" class="ui-slider-handle"></div>
</div>
</html>
不工作的主要部分是:
<script>
$( function() {
var handle = $( "#custom-handle" );
$( "#slider" ).slider({
create: function() {
var slide_number = Number($(this).slider("value"))/34+1 ;
handle.text( $( this ).slider( "value" ) );
$("#carouselExampleIndicators").data('slide-to',slide_number) ;
},
slide: function( event, ui ) {
var slide_number = Number(ui.value)/34+1 ;
handle.text( ui.value );
$("#corouselExampleIndicators").data('slide-to',slide_number) ;
}
});
} );
</script>
我得到的错误是:
TypeError: Actions[t.getLast(...)] is undefined, can't access property "bind" of it
和
TypeError: $(...).carousel is not a function
旋转木马运行良好，因此我不明白为什么会出现第二个错误。同时，我也不明白第一个错误。
那么，我的问题是，为什么这行不通？
其次，有没有更好的方法来做到这一点？
第三，我可以为此编写更好的代码吗？
感谢任何帮助!
UPD:已更新 fiddle .
UPD:将 $("#corouselExampleIndicators").data('slide-to',slide_number) ; 更改为 $('.corousel') .corousel(slider_number) ;，给定 here .但这仍然不起作用， slider 现在停止工作了。看fiddle here .
试图在代码中使用id而不是class，即使用了$('#corouselExampleIndicators').corousel(1) ;。仍然没有任何效果。
更新:如果有人感兴趣，可以找到最终版本here .这完美无缺。
最佳答案
我看到您包含了许多相互冲突的 jQuery 版本，并导致页面出现错误 Uncaught TypeError: $(...).carousel 不是函数
所以，删除这一行
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
然后使用脚本
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
更新:由于问题更新。
我在您最近更新的 fiddle 中的以下行中发现了另外两个拼写错误:
$('.corousel').corousel(slider_number) ;
它是 carousel 而不是 corousel 而且它是 slide_number 而不是 slider_number。所以，应该是
$('.corousel').carousel(slide_number) ;
注意:该脚本两次包含此错误行。
检查新 fiddle :http://jsfiddle.net/qmeanog1/
关于javascript - 制作基于 slider 的图像集合，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52576758/