禁用輪播中的下一個按鈕和上一個按鈕

Question

我在我的應用程序中使用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>

現在的問題是，如果li項少於10個，則不會禁用next按鈕和prev按鈕...請幫助！

Answer 1

將CSS添加到您的班級，例如

.jcarousel-prev-disabled, 
.jcarousel-next-disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
}

更新

使用$("#pagination li").length代替$("#pagination li").size() ，您的問題將得到解決。

Answer 2

我已經下載了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">&lsaquo;</a>
            <a href="#" class="jcarousel-control-next">&rsaquo;</a>
            <p class="jcarousel-pagination">
            </p>
        </div>
    </div>
</body>

禁用輪播中的下一個按鈕和上一個按鈕

問題描述

2 個解決方案

解決方案1
0 2016-05-18 10:56:10

解決方案2
0 2016-05-18 11:40:42

禁用輪播中的下一個按鈕和上一個按鈕

問題描述

2 個解決方案

解決方案1 0 2016-05-18 10:56:10

解決方案2 0 2016-05-18 11:40:42

解決方案1
0 2016-05-18 10:56:10

解決方案2
0 2016-05-18 11:40:42