Carousel numbers with fullscreen slider

[jspinkus]

Hi @mariusjopen

I'm still strugglin with this, I think I'm near but something is missing.
this is the code im using in the same fullscreen slide of the carousel (I gave my carousel the class "doorsproject" and I have a text box with the class "counter"):

<div class="counter"></div>
<script>
jQuery( ".counter" ).append( jQuery( ".doorsproject .lay-carousel-sink" ) );
</script>

So this seems to work, when I inspect element in chrome i can see that the .lay-carousel-sink div is outside the carousel and inside my new .counter div, but the numbers are not there, here goes a capture so you can see:

can you help me? I'm so close!!

Thanks for everything,
Juan

[mariusjopen]

Dear @jspinkus
ok, I see.

Probably you need to call it everytime when the slider got called.

Hmm…

You could call ti everytime when something in the slideshow gets changed.
Its a bit tricky with jQuery but possible.

We use Flickity for the carousel in general

Maybe that helps.

Best!

Marius

[jspinkus]

Hi @mariusjopen

I'm not sure if I understand what you mean.
Can you give an example?

Best!
Juan

[mariusjopen]

Dear @jspinkus
try the clone instead of the append first.

The problem is - like I can imagine - that flickity (the slider software) wants to update the number on every change.
So it searches for a specific box to change. Not you ripped that box out of the context. Flickity cannot find it anymore.
So try if something happens with clone instead of append.
If yes, then try to clone the whole box which contains the captions, numbers etc,

I hope that works.

Let me know!

Best!

Marius

[jspinkus]

Hi @mariusjopen

Thanks for your answer.
I tried with clone and the same happens, the original numbers are still there, and the cloned box is inside my div but empty again, the clonation is working but not bringing the numbers :(

I'm starting to to give up on this

Best!
Juan

[mariusjopen]

Dear @jspinkus
we will get back to you in a bit.

Best!

Marius

[jspinkus]

@mariusjopen
:-)

[jspinkus]

@mariusjopen
:-(

[mariusjopen]

Dear @jspinkus
can you again send a link to the website where you want to change the slider?
I cannot find the page with the image which you posted.

We will have another look.

Best!

Marius

[arminunruh]

Heyy!

Can you do this:

Update lay theme, update carousel addon.

In Carousel Addon options choose: Position of Captions, Numbers and Circles -> On top of Carousel

Under "Numbers" now set the "Space Bottom" to like 20px

Set your menu and site title and whatever to have 20px as well

When you edit your carousel choose "fixed height" and enter "100vh"

Hope that brings you closer to what you want.

[jspinkus]

Hi @arminunruh

Thanks for the tip, I updated the carousel and tried this, but its not what i need. I want the captions and numbers to be independent from the carousel, so when the screen size changes it doesn't affect them in any way. I'll keep trying with append and clone.

Nice carousel update ;), I think it would be great to have an option to give margin between slides when using multislides.

Love Laythme,

Cheers

[jspinkus]

Hi @arminunruh @mariusjopen ,

i finally did it with the carousel update as you said (sorry for last message),
I used the Fixed Height option: (100vh - 120px) and it works in any screen size,
now the carousel has always the same margin top and bottom and also the numbers.

Thanks!

[mariusjopen]

Dear @juanpinkus
really happy that you got it!

Best!

Marius