Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Carousel numbers with fullscreen slider

    Addons
    3
    20
    981
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • J
      jspinkus last edited by

      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!

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

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

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

        Best!

        MArius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • J
          jspinkus last edited by 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!

          1 Reply Last reply Reply Quote 0
          • J
            jspinkus last edited by

            Hi @mariusjopen

            here goes a capture explaining what I want to resolve:
            alt text

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

            1 Reply Last reply Reply Quote 0
            • mariusjopen
              mariusjopen Global Moderator last edited by

              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

              www.mariusjopen.world

              1 Reply Last reply Reply Quote 0
              • J
                jspinkus last edited by

                Thank you @mariusjopen
                I'll try that

                Best!

                1 Reply Last reply Reply Quote 1
                • mariusjopen
                  mariusjopen Global Moderator last edited by

                  Good luck!

                  www.mariusjopen.world

                  1 Reply Last reply Reply Quote 0
                  • J
                    jspinkus last edited by

                    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:
                    alt text

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

                    Thanks for everything,
                    Juan

                    1 Reply Last reply Reply Quote 0
                    • mariusjopen
                      mariusjopen Global Moderator last edited by

                      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

                      www.mariusjopen.world

                      1 Reply Last reply Reply Quote 0
                      • J
                        jspinkus last edited by

                        Hi @mariusjopen

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

                        Best!
                        Juan

                        1 Reply Last reply Reply Quote 0
                        • mariusjopen
                          mariusjopen Global Moderator last edited by

                          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

                          www.mariusjopen.world

                          1 Reply Last reply Reply Quote 0
                          • J
                            jspinkus last edited by

                            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

                            1 Reply Last reply Reply Quote 0
                            • mariusjopen
                              mariusjopen Global Moderator last edited by

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

                              Best!

                              Marius

                              www.mariusjopen.world

                              1 Reply Last reply Reply Quote 0
                              • J
                                jspinkus last edited by

                                @mariusjopen
                                :-)

                                1 Reply Last reply Reply Quote 0
                                • J
                                  jspinkus last edited by

                                  @mariusjopen
                                  :-(

                                  1 Reply Last reply Reply Quote 0
                                  • mariusjopen
                                    mariusjopen Global Moderator last edited by

                                    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

                                    www.mariusjopen.world

                                    1 Reply Last reply Reply Quote 0
                                    • arminunruh
                                      arminunruh Global Moderator last edited by

                                      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.

                                      1 Reply Last reply Reply Quote 0
                                      • J
                                        jspinkus last edited by 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

                                        1 Reply Last reply Reply Quote 0
                                        • J
                                          jspinkus last edited by

                                          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!

                                          1 Reply Last reply Reply Quote 0
                                          • mariusjopen
                                            mariusjopen Global Moderator last edited by

                                            Dear @juanpinkus
                                            really happy that you got it!

                                            Best!

                                            Marius

                                            www.mariusjopen.world

                                            1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Before you post

                                            Use the Search Feature. Maybe there is already a solution to your issue.

                                            1. Update Lay Theme and all Lay Theme Addons
                                            2. Disable all Plugins
                                            3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                                            4. Now see if your problem solved itself
                                            5. Go here, see if your problem is listed here:
                                            Troubleshooting

                                            When you post:
                                            1. Post a link to where the problem is
                                            2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                                            Thanks!

                                            Online Users

                                            7
                                            M

                                            Recent Topics

                                            • M

                                              komische boxen auf der Website

                                            • S

                                              Theme crashed - because of Polylang?

                                            • J

                                              Split Screen just on front page / subpages without the split?

                                            • Y

                                              image quality dropped

                                            laytheme.com