我正在尝试使用光滑的旋转木马(https://github.com/kenwheeler/slick),他们有一个slickNext()触发旋转木马下一张幻灯片的方法.
现在我的html文件看起来像这样:
<div class="slick-slider">
<div><%= image_tag "1.jpg"%></div>
<div><%= image_tag "1.jpg"%></div>
<div><%= image_tag "1.jpg"%></div>
</div>
<i class="fa fa-angle-right"></i>
<script type="text/javascript">
$("fa-angle-right").click(function(e) {
$("fa-angle-right").slickNext();
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.slick-slider').slick({
dots: true
});
(jQuery)});
</script>
Run Code Online (Sandbox Code Playgroud)
但是这不起作用,我无法弄清楚原因.谢谢
实际上RUS答案的一部分是正确的.它应该是:
<script type="text/javascript">
$('.fa-angle-right').click(function() {
$('.fa-angle-right').slick('slickNext');
});
</script>
Run Code Online (Sandbox Code Playgroud)
所以你按下一个按钮试图让光滑的滑块移动到下一张幻灯片.您需要.处理该行的for行,click然后slickNext()由滑块处理,因此它应如下所示:
<script type="text/javascript">
$(".fa-angle-right").click(function(e) { // Added a '.'
$(".slick-slider").slickNext(); // Switched to '.slick-slider'
});
</script>
Run Code Online (Sandbox Code Playgroud)
$('.fa-angle-right').slick('slickNext');
Run Code Online (Sandbox Code Playgroud)
您首先调用 slick 对象,然后始终传递参数“slickNext”。
| 归档时间: |
|
| 查看次数: |
10901 次 |
| 最近记录: |