Question

使用Glide.js（这里是documentation section）我无法在首次加载幻灯片时禁用“上一页”按钮，但是在加载第二张幻灯片后启用它。我需要做的就是在两张幻灯片之间循环。

与“下一步”按钮相同但反之亦然：首先启用，但在加载第二张幻灯片时禁用。

我尝试了一些事情：

beforeInit: function() {
    $(".prev").attr("disabled");
}

...但由于某种原因，未添加属性disabled。

beforeInit: function() {
    $(".prev").attr("disabled");
},
afterInit: function() {
    $(".prev").removeAttr("disabled");
}

......但与第一种方法相同。

beforeInit: function() {
    $(".prev").toggleClass("disabled");
}

...但这只是添加了一个类（它实际上没有切换它），按钮仍然可以加载上一张幻灯片。

以下是演示：http://codepen.io/ricardozea/pen/ca8d29139b409914e0795d9772d75421

非常感谢任何帮助。

感谢。

Answer 1

根据.attr()文档

.attr( attributeName )
获取匹配元素集中第一个元素的属性值。

单个参数in用于“查找”属性。您需要提供第二个参数来更改属性的设置。

.attr( attributeName, value )
为匹配元素集设置一个或多个属性。

将其更改为：

$(".prev").attr("disabled", "disabled");

此外，看起来您在codepen中的CSS不会寻找“禁用”属性来应用任何样式更改。因此，您可以使用以下方法组合这些技术：

$(".prev").attr("disabled", "disabled").addClass('disabled');

Answer 2

好吧，我found a jQuery plugin允许我使用toggleAttr();，就像执行toggleClass();一样。对于像我这样的设计师来说，这是天赐之物

此插件与Glide.js中的afterInit和afterTransition选项相结合，允许我在两张幻灯片之间切换，并在Prev和Next按钮上切换disabled属性。

在CSS中，我使用属性选择器定位了禁用的按钮。

这是我的jQuery脚本解决方案：

/*!
 * toggleAttr() jQuery plugin
 * @link http://github.com/mathiasbynens/toggleAttr-jQuery-Plugin
 * @description Used to toggle selected="selected", disabled="disabled", checked="checked" etc…
 * @author Mathias Bynens <http://mathiasbynens.be/>
 */
jQuery.fn.toggleAttr = function(attr) {
 return this.each(function() {
  var $this = $(this);
  $this.attr(attr) ? $this.removeAttr(attr) : $this.attr(attr, attr);
 });
};

//Glide
$("#Glide").glide({
  type: "slideshow",
  autoplay: false,
  animationDuration: 1000,
  hoverpause: true,
  autoheight: true,
  afterInit: function() {
    $(".prev").toggleAttr("disabled");
  },
  afterTransition: function() {
    $(".prev").toggleAttr("disabled");
    $(".next").toggleAttr("disabled");
  }
});

CSS使用属性选择器来定位禁用的按钮：

[disabled] { background: red; }

以下是CodePen中的工作演示：http://codepen.io/ricardozea/pen/73ecc288b581d78332fc6e69017c7a54?editors=0010

Answer 3

如果有人需要免费的jQuery解决方案：

function DisableControls(Glide, Components, Events) {
  const PREV_CONTROL_SELECTOR = "[data-glide-dir='<']";
  const NEXT_CONTROL_SELECTOR = "[data-glide-dir='>']";
  const component = {
    buildAfter() {
      this.prevBtn = Components.Html.root.querySelector(PREV_CONTROL_SELECTOR);
      this.nextBtn = Components.Html.root.querySelector(NEXT_CONTROL_SELECTOR);
    },
    handleDisable() {
      const perView = Glide.settings.perView;
      const slidesCount = Components.Html.slides.length;

      this.prevBtn.disabled = (Glide.index <= 0);
      this.nextBtn.disabled = (Glide.index >= slidesCount - perView);
    },
  };

  Events.on("build.after", function () {
    component.buildAfter();
    component.handleDisable();
  });
  Events.on("run.after", function () {
    component.handleDisable();
  });
  return component;
}

使用：

new Glide('.glide').mount({ DisableControls: DisableControls })

Glide.js - 禁用/启用上一个/下一个按钮

3 个答案: