禁用轮播中的下一个按钮和上一个按钮
[英]Disable next button and prev button in Carousel
问题描述
I am using jquery carousel in my application like 
我在我的应用程序中使用jQuery轮播
<script type="text/javascript">
var j = jQuery.noConflict();
j(document).ready(function () {
j('#pagination').jcarousel({
wrap: 'circular'
});
var count = $("#pagination li").size();
if (count < 10)
{
j(".jcarousel-prev").addClass("jcarousel-prev-disabled");
j(".jcarousel-next").addClass("jcarousel-next-disabled");
}
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
var j = jQuery.noConflict();
j(document).ready(function () {
j('#pagination').jcarousel({
wrap: 'circular'
});
var count = $("#pagination li").size();
if (count < 10) {
j(".jcarousel-prev").addClass("jcarousel-prev-disabled");
j(".jcarousel-next").addClass("jcarousel-next-disabled");
}
});
});
</script>
Now the issue is that it doesn't make next button and prev button disabled if there are li items less than 10... Please help!!! 现在的问题是，如果li项少于10个，则不会禁用next按钮和prev按钮...请帮助！
2 个解决方案
解决方案1
0 2016-05-18 10:56:10
Add css to your class like 将CSS添加到您的班级，例如
.jcarousel-prev-disabled,
.jcarousel-next-disabled {
pointer-events: none;
cursor: default;
opacity: 0.6;
}
Updated 更新
Use $("#pagination li").length instead of $("#pagination li").size() and your problem will solve. 使用$("#pagination li").length代替$("#pagination li").size() ，您的问题将得到解决。
解决方案2
0 2016-05-18 11:40:42
I've downloaded the jQuery carousel plugin and created the example below for you.The example below will disable the prev & next buttons.If you want to completely hide them you can use $(".jcarousel-control-next").css('display', 'none'); 我已经下载了jQuery轮播插件，并为您创建了以下示例。以下示例将禁用prev和next按钮。如果要完全隐藏它们，可以使用$(".jcarousel-control-next").css('display', 'none');
<head>
<title>Basic carousel - jCarousel Examples</title>
<link rel="stylesheet" type="text/css" href="../_shared/css/style.css">
<link rel="stylesheet" type="text/css" href="jcarousel.basic.css">
<script type="text/javascript" src="../../vendor/jquery/jquery.js"></script>
<script type="text/javascript" src="../../dist/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="jcarousel.basic.js"></script>
<script type="text/javascript">
$(function(){
var imageCount = $("#images li").length;
if(imageCount < 10){
$(".jcarousel-control-next").css('pointer-events', 'none');
$(".jcarousel-control-prev").css('pointer-events', 'none');
}
});
</script>
</head>
<body>
<div class="wrapper">
<div class="jcarousel-wrapper">
<div class="jcarousel">
<ul id="images">
<li><img src="../_shared/img/img1.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img2.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img3.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img4.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img5.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img6.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img1.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img2.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img3.jpg" width="600" height="400" alt=""></li>
</ul>
</div>
<a href="#" class="jcarousel-control-prev">‹</a>
<a href="#" class="jcarousel-control-next">›</a>
<p class="jcarousel-pagination">
</p>
</div>
</div>
</body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.