【问题标题】:bx slider with single and multiple images具有单个和多个图像的 bx 滑块
【发布时间】:2014-05-01 03:33:45
【问题描述】:

我正在使用 jQuery bx 滑块。
当我在 li 中使用三个图像时,我看到三个点, 但是当我使用一张图片时,它不应该显示一个点
我知道使用pager: false 会隐藏点, 但我只使用一个 js 代码,所以这应该是动态变化的。
我正在尝试在我的 CMS 中实现,我试图将其更改为单个和多个图像。
能告诉我怎么解决吗?

http://bxslider.com/

在下面提供代码 https://github.com/stevenwanderski/bxslider-4/blob/master/jquery.bxslider.js

var populatePager = function(){
            var pagerHtml = '';
            var pagerQty = getPagerQty();
            // loop through each pager item
            for(var i=0; i < pagerQty; i++){
                var linkContent = '';
                // if a buildPager function is supplied, use it to get pager link value, else use index + 1
                if(slider.settings.buildPager && $.isFunction(slider.settings.buildPager)){
                    linkContent = slider.settings.buildPager(i);
                    slider.pagerEl.addClass('bx-custom-pager');
                }else{
                    linkContent = i + 1;
                    slider.pagerEl.addClass('bx-default-pager');
                }
                // var linkContent = slider.settings.buildPager && $.isFunction(slider.settings.buildPager) ? slider.settings.buildPager(i) : i + 1;
                // add the markup to the string
                pagerHtml += '<div class="bx-pager-item"><a href="" data-slide-index="' + i + '" class="bx-pager-link">' + linkContent + '</a></div>';
            };
            // populate the pager element with pager links
            slider.pagerEl.html(pagerHtml);
        }

【问题讨论】:

    标签: javascript jquery jquery-ui jquery-events bxslider


    【解决方案1】:

    这是一个简单的 javascript,它将查看有多少个点,如果它小于 2(即 1),它将隐藏那个点。

     var elements = document.getElementsByClassName('bx-pager-link');
        if(elements.length < 2){
         for (var i in elements) {
          if (elements.hasOwnProperty(i)) {
            elements[i].style.display= 'none';
          }
         }
        }
    

    http://bxslider.com/ 上测试

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-02-26
      • 2020-09-16
      • 1970-01-01
      • 2015-08-09
      • 1970-01-01
      • 2021-07-08
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多