cardslider | 🃏 Cardslider is a design UI controller | User Interface library

Well... It depends of the which feature you need from this library, but for "simple" pager you can use Pager Accompanist library.

https://github.com/google/accompanist/tree/main/pager

And you can check the docs here:

https://google.github.io/accompanist/pager/

In your Buildscript, try ext.kotlin_version = '1.4.31'. I suspect that will work!

The error code already show whats wrong. "Positioned widgets are placed directly inside Stack widgets. The offending Positioned is currently placed inside a Column widget." You have to place Positioned Widget inside Stacks. You cant place them inside a Column.

I found the solution. Apparently the activated index is a promise:

Your code is quite messy, but I think one problem you have is that you assign the wrong element to firstClone and lastClone. You propably want those variables to be references to the new clones, but that's not what your code does.

Let's look at this line:

this.firstClone = this.myCards.first().before(this.myCards.last().clone().addClass('cloned'));

• First, you clone the last card and add the class cloned (this.myCards.last().clone().addClass('cloned'))

• Then, you pass that clone to the function before of the first card (this.myCards.first().before(...))

• Finally, you assign whatever the function before returns to the variable this.firstClone

The problem is that the expression a.before(b) inserts b before a and then returns a. What you want to save, though, is a reference to b, not a.

You have to use the function insertBefore instead. It does exactly the same as before, but the other way around: b.insertBefore(a) also inserts b before a, but this returns b.

(See the difference here: https://www.mkyong.com/jquery/jquery-before-and-insertbefore-example/)

So the line we looked at should be:

this.firstClone = this.myCards.last().clone().addClass('cloned').insertBefore(this.myCards.first());

This way, your variable this.firstClone holds a reference to the newly created clone and not the (previously) first element. The same holds for the line after that:

this.lastClone = this.myCards.first().clone().addClass('cloned').insertAfter(this.myCards.last());

I hope this solves your problem.

Used in context: