splide | Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependenc | Animation library

I have also reported the issue on grapesjs' github https://github.com/artf/grapesjs/discussions/4062

and added two workarounds

1. patching splidejs as follows (did not submit a PR). This allowed splidejs to be properly loaded by the script of my new component type.

as in

The documentation of the vue-splide integration is clearly talking about Vue3 composition API.

Checking in the github issues of vue-splide, I found this one which is referencing a solution that you've linked above. Meanwhile, when trying this, those are the warnings that I do have in my CLI.

Those are also related to Vue3 (which is not compatible with Nuxt2, only Nuxt3 supports Vue3). Looking at the date of all the posts, it looks like it was matching somewhat the time-frame when Vue3 was still in a beta-limbo and probably not adopted by everybody.

At some point, I guessed that the package maybe lost some retro-compatibility with Vue2 in the next months. I then tried to install the version 0.3.5 of @splidejs/vue-splide rather than the latest one and it's working perfectly fine with it!

Here is the whole setup to have it working with Nuxt2 nuxt.config.js

A few things:

1. I would import the Splide module synchronously in your component instead of a dynamic import, so it is ready as soon as the component is rendered.
2. I'm not sure if asynchronously importing the CSS will work like that -- it may depend on your bundler setup. Either way, I would import it outside of the action, either by bundling it with the rest of your CSS or via CDN. In my example below, I load it from CDN using .
3. I don't see an "updated" function in Splide's API, so I'm not sure what carousel.update() would do. I don't think you need to return an "update" method from your action anyway, since your action isn't taking any parameters. The update method is meant to react to your action's parameters changing.
4. You're incorrectly storing a reference to the carousel -- you're storing a reference to the return value of mount, not the constructor. Because of this, destroy is being called on the wrong variable. Try something like this:

I use splide on my own site which is the only reason I'm familiar with it, but their documentation is horrible. The event callback functions have an event object that contain the slide index triggering the event (such as becoming active or inactive). Yes the active event does run every time a slide changes, but look at what element you're querying. You grab the first element with class 'title' regardless of what's active. The following should do what you want.

Not fully clear what you want to achieve, sorry. But I'll try to help.

Variant sizes looks like an array, but your console output shows the object. So there is two ways of solving this.

If you have an object you can just go for:

cubic-bezier function is a way to define a Cubic Bezier curve.

A Cubic Bezier curve is defined by four points P0, P1, P2, and P3. P0 and P3 are the start and the end of the curve and, in CSS these points are fixed as the coordinates are ratios. P0 is (0, 0) and represents the initial time and the initial state, P3 is (1, 1) and represents the final time and the final state.

The problem is cubic-bezier(0.42, 0.65, 0.27, 0.99) is too curved to the up, which means it does most of the animation at the beginning. For example if we use cubic-bezier(.5,.5,.5,.5) it would be completly linear. As you can see in this link, most of the animation is done in the first 5 seconds.

Go to the link, the function should be set to cubic-bezier(0.42, 0.65, 0.27, 0.99) by default but you have to set the time to 10 secs and also select the linear curve on right-hand side to compare it with the main one.

Those elements appear to be loaded dynamically. Likely by requestSponsors()? If that's the case then you'll need to await that operation. Assuming it returns a Promise, currently its resulting Promise is being lost. You can either await it directly in your async function:

Powershell is parsing the @. Try using quotes like this:

I've been looking for the problem for 1 hour. i think i found it.

Codepen: https://codepen.io/ykdsoft/pen/mdmyEpB

The problem seems to be caused by your .splide__pagination { display:none } code in your css file.

I did some code trials. When I cancel display:none the problem goes away.

Fix: you can use visibility:hidden instead of display:none in css

Update: i have tried pagination:false option in js but the problem continue . You can fix it with visibility:hidden in css.