Carousel numbers with fullscreen slider

[jspinkus]

Hi, first of all.. lay theme best theme ever!

Im using carousel and fullscreen slider addons on my web studio.juanpinkus.com
I want the carousel numbers to have a fixed or absolute position at the bottom of the screen of each fullscreen slide, with the same margin as the menu buttons but in the bottom. I hope you understand what Im trying to say

I tried somo things but couldn't make it work, now I gave the numbers an absolute position so that the imgs of the carousel stay vertically centered.

Can you help me with this?
Thanks!

[mariusjopen]

Dear @jspinkus
thank you :-) We are happy to hear!

But I do not really understand what you are looking for.

Best!

MArius

[jspinkus]

Hi @mariusjopen , thanks for answering.

Ill try to explain it better.
I have one carousel per fullscreen, and the numbers (1/5) are always sticked to the bottom of the carousel, i can give more space between slides and numbers, but what I want is the numbers to be always at bottom:1% of the fullscreen.

I can send you some captures if it helps.

Thanks!

[jspinkus]

Hi @mariusjopen

here goes a capture explaining what I want to resolve:

I think its easy to do, but didnt find the way to do it.
Thank you

[mariusjopen]

Dear @jspinkus
yes. This is not really easily solvable.
The problem is in this case that the numbers are inside the box of the slideshow.

You could use jQuery to cut the div out of the box and paste it into another box on the same fullscreen slide.
http://api.jquery.com/append/

Maybe that can work.

Best!

Marius

[jspinkus]

Thank you @mariusjopen
I'll try that

Best!

[mariusjopen]

Good luck!

[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