Glide: Set active class at the beginning of the slide animation

[mxmtsk]

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

[adamjuran]

+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).