0

使用Glide.js（这里是文档部分）我无法在幻灯片第一次加载时禁用 Prev 按钮，但在加载第二张幻灯片后启用它。我需要做的就是在两张幻灯片之间循环。

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

我尝试了几件事：

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

任何帮助是极大的赞赏。

谢谢。

4

3 回答 3

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 })
于 2020-05-19T11:26:41.507 回答
1

根据.attr()文档

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

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

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

将其更改为：

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

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

$(".prev").attr("disabled", "disabled").addClass('disabled');
于 2017-02-01T05:19:01.013 回答
0

好吧，我找到了一个 jQuery 插件，让我可以toggleAttr();像使用toggleClass();. 对于我这样的设计师来说，这是天赐之物

这个插件与 Glide.js 中的afterInit和afterTransition选项相结合，让我可以在两张幻灯片之间切换并切换disabledPrev 和 Next 按钮上的属性。

在 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

于 2017-02-01T05:49:32.253 回答