Fullscreen slider pagination?
-
wrote on Apr 24, 2020, 5:16 PM last edited by
Hi! Once again I'm here with a question... Would you have any suggestion on how to create page numbers for rows when using the fullscreen slider?
I am basically creating a site which is just one big carousel but would like to use the fullscreen slider instead of the carousel addon, so I can better customize the layout of each slide.
My problem is that I'd need to show numbers of each slide. I could, of course, put them there manually, but that would be a bit unpractical if I decide to change the order of the slides later.
Thank you so much for your help and the amazing work as always!
-
wrote on Apr 27, 2020, 12:58 PM last edited by
Okay… If someone is someday trying something similar, I kind of got a vague idea how to pull this off. So, in short, I try to create pagination 1/3, 2/3, 3/3 etc… to a site using full-screen slider addon.
I'm a complete newbie with jQuery/JS, so this could be tidied up for sure. But the only major thing I'm still struggling with is to count the number of elements to get the total amount of slides. Checking the number of slides with "length" works nicely on Chrome console, but when I add this to LayThemes custom head content it always returns "0".
<script> var totalCount = jQuery(".fp-slide").length; window.laytheme.on('newpageshown', function(){ console.log(totalCount); jQuery(".row-0 > .row-inner > .column-wrap > .col").append("<div class='page_number'>1 / "+totalCount+"</div>"); jQuery(".row-1 > .row-inner > .column-wrap > .col").append("<div class='page_number'>2 / "+totalCount+"</div>"); jQuery(".row-2 > .row-inner > .column-wrap > .col").append("<div class='page_number'>3 / "+totalCount+"</div>"); }); </script>
If someone notices some obvious thing that I'm missing to get the length work, I'd of course appreciate some quick tips! :)
-
wrote on Nov 23, 2021, 12:44 PM last edited by
Hej @nuotio did you somehow figure it out yet? I am working on something similar ... please let me know.
Thanks Fabian
I also code custom websites or custom Lay features.
💿 Email me here: 💿
info@laytheme.com
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it