Set active class at the beginning of the slide animation

[mxmtsk]

trafficstars

I'm trying to understand why the active class on slides (glide__slide--active) is only set after the transition ended and not already when it starts - or why there are no intermediate classes for the status of sliding.

Is there a way to configure this behavior right now?

I'm asking because this would make parallel css transitions while it's sliding possible (for example scaling the active slide a little bit), but with the current approach it's only executed after the slide animation is finished.

[elementalhub]

I got this to work with a custom component. Inside a component you can access other core components such as the Html Component, which lets you access the current slide element and add classes to it. I added my own is-active, is-next and is-prev classes to the respective elements and then added custom transitions via CSS.

import { siblings } from '@glidejs/glide/src/utils/dom';

...
const CustomActiveClass = function (Glide, Components, Events) {
    var Component = {
        mount() {
            this.changeActiveSlide();
        },

        changeActiveSlide() {
            let slide = Components.Html.slides[Glide.index];
            slide.classList.remove('is-next', 'is-prev');
            slide.classList.add('is-active');
 
            siblings(slide).forEach((sibling) => {
                sibling.classList.remove('is-active', 'is-next', 'is-prev');
            });

            if(slide.nextElementSibling) {
                slide.nextElementSibling.classList.add('is-next');
            }

            if(slide.previousElementSibling) {
                slide.previousElementSibling.classList.add('is-prev');
            }
        },
    };

    Events.on('run', () => {
        Component.changeActiveSlide();
    });

    return Component;
};

And then register the component when mounting:

glide.mount({
    'CustomActiveClass': CustomActiveClass,
});

[juranosaurustechs]

+1

[nitrokevin]

I'm using this with foundation and it works great until I build for production, its not liking "import { siblings } from '@glidejs/glide/src/utils/dom';" any ideas why that might be

[zorek9502]

I had to implement an animation right at the beginning of the transition/transform animation and I found this in the Doc. https://glidejs.com/docs/events/

glide = new Glide ....

glide.on('move', () => {
// Code to run right before movement transition begins.
});

glide.on('move.after', () => {
// Code to run right after movement transition ends.
});

there also also methods for swipe event but I did not try those

_swipe.start Called right after swiping begins.

swipe.move Called during swiping movement.

swipe.end Called right after swiping ends._

[theamnesic]

I got this to work with a custom component. Inside a component you can access other core components such as the Html Component, which lets you access the current slide element and add classes to it. I added my own is-active, is-next and is-prev classes to the respective elements and then added custom transitions via CSS.

import { siblings } from '@glidejs/glide/src/utils/dom';

...
const CustomActiveClass = function (Glide, Components, Events) {
    var Component = {
        mount() {
            this.changeActiveSlide();
        },

        changeActiveSlide() {
            let slide = Components.Html.slides[Glide.index];
            slide.classList.remove('is-next', 'is-prev');
            slide.classList.add('is-active');
 
            siblings(slide).forEach((sibling) => {
                sibling.classList.remove('is-active', 'is-next', 'is-prev');
            });

            if(slide.nextElementSibling) {
                slide.nextElementSibling.classList.add('is-next');
            }

            if(slide.previousElementSibling) {
                slide.previousElementSibling.classList.add('is-prev');
            }
        },
    };

    Events.on('run', () => {
        Component.changeActiveSlide();
    });

    return Component;
};

And then register the component when mounting:

glide.mount({
    'CustomActiveClass': CustomActiveClass,
});

Unfortunately it seems this doesn't work with clones (carousel type).

[smitbarmase]

It partially works on the carousel type (Infinite scrolling). It breaks when transitioning from the last slide to the first one. I fixed it using by grabbing the inactive slide that is at the right of the last active slide, and the same for the first active slide by grabbing the previous inactive slide.

    slider.mount({
      CustomActiveClass: (Glide, Components, Events) => {
        var Component = {
          mount() {
            this.changeActiveSlide();
          },
          changeActiveSlide() {
            const slide = Components.Html.slides[Glide.index];

            // Add active animation to next index
            slide.classList.add("glide_slide-is-active");

            // Remove from all existing indices
            siblings(slide).forEach((sibling) => {
              sibling.classList.remove("glide_slide-is-active");
            });

            const lastIndex = Components.Html.slides.length - 1;

            // Fix for infinite scroll when next card
            if (Glide.index == 0) {
              Components.Html.slides[
                lastIndex
              ].nextElementSibling.classList.add(
                "glide_slide-is-active"
              );
            }

            // Fix for infinite scroll when prev card
            if (Glide.index == lastIndex) {
              Components.Html.slides[0].previousElementSibling.classList.add(
                "glide_slide-is-active"
              );
            }
          },
        };
        Events.on("run", () => {
          Component.changeActiveSlide();
        });
        return Component;
      },
    });

[georgebrook]

@smitbarmase awesome stuff, just one thing i had to change for vanilla JS, cos i was getting ReferenceError: siblings is not defined

I changed

siblings(slide).forEach((sibling) => {
  sibling.classList.remove("glide_slide-is-active");
});

to

[...slide.parentNode.children].filter((child) => child !== slide).forEach((sibling) => {
  sibling.classList.remove("glide_slide-is-active");
});