Set active class at the beginning of the slide animation

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

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