slide-it | slide any thing - | Learning library

I figure it out but I'm not sure if its the best way (breaks the center-active animation which I really like).

Here's what I've noticed in your code:

1. It should be :src="n.src" and not @src="{{ n.src }}". @ is short for v-on whereas : is short for v-bind. What we need is v-bind:src and there is no such thing as v-on:src as far as I know.
2. Provide a proper :key to each . Avoid using non-primitive value for key.
3. Use Vuetify's component over tags.

Here's a demo.

This will work:

Not sure you are using the slick slider in a way it was intended to work.

My previous option didn't work so I rolled back to this answer.

The slides aren't missing, they are hidden by the slick slider script with a css transform inline style on slick-track container.

Perhaps is there a function to disable sliding effect for wide screens as it is what make your slides hidding.

Otherwise, you should be able to overwrite it with css:

I have used media queries.You can adjust according to your need.When you reduce the size of the page, it will rotate 90 degrees.

https://codepen.io/Rishab2019/pen/RwWgxpj

Is toggle a special keyword here?

Yes, it's a native function as it is inside of your v-slot:default="{ active, toggle }.

In other words, does @click="toggle" make "active" true or false?

Yes, when you click to this toggle function will make the active to true/false by with the help of model.

The following line declares a scoped slot default variable and it is provided a scope object, which contains active, toggle

You're generating a carousel/gallery/slider for each of your three images, overlapping each other. What you want is to create one carousel/gallery/slider with your three images inside. Replace

Assuming to your example, you add slider library from outer resource.

Just add this script to your application layout.

There are different events of the owl-carousel where you can bind animate.css animations to.

In the example I used the change.owl.carousel event:

change.owl.carousel

Type: attachable
Callback: onChange
Parameter: property
When a property is going to change its value.

The function itself adds the animation class (addClass()) and removes it again after the animation end is triggered (one(...) followed by removeClass()).