Fullscreen slider pagination?
-
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!
-
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! :)
-
Hej @nuotio did you somehow figure it out yet? I am working on something similar ... please let me know.
Thanks Fabian
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