Q: Swiper initialization not working (Cannot read property 'push' of undefined) What I'm trying to do is really simple, or so I thought.
The Swiper.js API documents a boolean parameter which is called init that allows disabling the automatic initialization of the swiper.
What I would like to do is define the swiper globally like so:
const carousel = new Swiper(".swiper-container" , {
    freeMode: true,
    slidesPerView: "auto",
    init: false,
});

And initialize it when a card is clicked, like so:
$(".card").click(function(){
    carousel.init();
});

The problem with this is that the browser throws an error and the script doesn't work. Here's the error:

Cannot read property 'push' of undefined

I don't know what the problem is because the Swiper API clearly states that after setting the init parameter to false, you can manually initialize it by calling carousel.init()

A: It does seem that I might have solved this problem. It seems that even if you declare the swiper globally, the swiper.js can't access it for some strange reason, so I found a workaround. Maybe this is the way the designed it, but for me, at the least, it make very little sense.
First, you need to declare your swiper inside a function, like so:
function carouselProperties() {
    return new Swiper(".swiper-container", {
        init: false,
        freeMode: true,
        slidesPerView: "auto",
    });
}

After that we go inside of the function in which the swiper should be called, in this case a click event listener.
$(".card").click(function(){
    // Here we define a variable that returns the swiper
    const carousel = carouselProperties()
    // Afte we define this variable we can finally call the init function
    carousel.init();
});

To recap:

*

*You define a function which returns the swiper and its properties.

*You call that function inside all your other functions that needs to retrieve the swiper information.

I hope this helped anyone with the same problem as I.
