CODEWITHSUNDEEP
jqueryglidejs
Ricardo Zea
Ricardo Zea

Reputation: 10282

Glide.js - Disable/Enable Prev/Next buttons

Using Glide.js (here's the documentation section) I've been unable to make the Prev button disabled when the slideshow first loads, but then to enable it once the second slide has been loaded. All I need to do is cycle between 2 slides.

Same thing with the Next button but vice versa: Enabled at first, but disabled when second slide is loaded.

I've tried a few things:

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

…but for some reason the attribute disabled isn't added.

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

…but same result as first approach.

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

…but this just adds a class (it actually doesn't toggle it) and the button still works to load the previous slide.

Here's a demo: http://codepen.io/ricardozea/pen/ca8d29139b409914e0795d9772d75421

Any help is greatly appreciated.

Thanks.

Upvotes: 0

Views: 4971

Answers (3)

Nikolai
Nikolai

Reputation: 31

If someone need jQuery free solution:

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;
}

Use:

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

Upvotes: 3

Ricardo Zea
Ricardo Zea

Reputation: 10282

Well, I found a jQuery plugin that allows me to use toggleAttr(); just like doing toggleClass();. For a designer like me, this is a Godsend 😁

This plugin combined with the afterInit and afterTransition options from Glide.js allowed me to switch between two slides and toggle the disabled attribute on the Prev and Next buttons.

In the CSS I targeted the disabled buttons with an attribute selector.

This is my jQuery script solution:

/*!
 * 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");
  }
});

The CSS using an attribute selector to target the disabled buttons:

[disabled] { background: red; }

Here's a working demo in CodePen: http://codepen.io/ricardozea/pen/73ecc288b581d78332fc6e69017c7a54?editors=0010

Upvotes: 0

haxxxton
haxxxton

Reputation: 6442

As per the .attr() documentation

.attr( attributeName )
Get the value of an attribute for the first element in the set of matched elements.

A single parameter in is used to "look up" the attribute. You need to supply a second parameter to change the attribute's setting.

.attr( attributeName, value )
Set one or more attributes for the set of matched elements.

Change it to:

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

Additionally, it would appear your CSS in the codepen isnt looking for the attribute "disabled" to apply any styling changes. So you can combine the techniques using:

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

Upvotes: 1

Related Questions