Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. Addons
  3. Carousel numbers with fullscreen slider

Carousel numbers with fullscreen slider

Scheduled Pinned Locked Moved Addons
20 Posts 3 Posters 1.6k Views
  • 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 Offline
    J Offline
    jspinkus
    wrote on last edited by
    #1

    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
    0
    • mariusjopenM Offline
      mariusjopenM Offline
      mariusjopen
      Global Moderator
      wrote on last edited by
      #2

      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
      0
      • J Offline
        J Offline
        jspinkus
        wrote on last edited by jspinkus
        #3

        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
        0
        • J Offline
          J Offline
          jspinkus
          wrote on last edited by
          #4

          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
          0
          • mariusjopenM Offline
            mariusjopenM Offline
            mariusjopen
            Global Moderator
            wrote on last edited by
            #5

            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
            0
            • J Offline
              J Offline
              jspinkus
              wrote on last edited by
              #6

              Thank you @mariusjopen
              I'll try that

              Best!

              1 Reply Last reply
              1
              • mariusjopenM Offline
                mariusjopenM Offline
                mariusjopen
                Global Moderator
                wrote on last edited by
                #7

                Good luck!

                www.mariusjopen.world

                1 Reply Last reply
                0
                • J Offline
                  J Offline
                  jspinkus
                  wrote on last edited by
                  #8

                  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
                  0
                  • mariusjopenM Offline
                    mariusjopenM Offline
                    mariusjopen
                    Global Moderator
                    wrote on last edited by
                    #9

                    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
                    0
                    • J Offline
                      J Offline
                      jspinkus
                      wrote on last edited by
                      #10

                      Hi @mariusjopen

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

                      Best!
                      Juan

                      1 Reply Last reply
                      0
                      • mariusjopenM Offline
                        mariusjopenM Offline
                        mariusjopen
                        Global Moderator
                        wrote on last edited by
                        #11

                        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
                        0
                        • J Offline
                          J Offline
                          jspinkus
                          wrote on last edited by
                          #12

                          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
                          0
                          • mariusjopenM Offline
                            mariusjopenM Offline
                            mariusjopen
                            Global Moderator
                            wrote on last edited by
                            #13

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

                            Best!

                            Marius

                            www.mariusjopen.world

                            1 Reply Last reply
                            0
                            • J Offline
                              J Offline
                              jspinkus
                              wrote on last edited by
                              #14

                              @mariusjopen
                              :-)

                              1 Reply Last reply
                              0
                              • J Offline
                                J Offline
                                jspinkus
                                wrote on last edited by
                                #15

                                @mariusjopen
                                :-(

                                1 Reply Last reply
                                0
                                • mariusjopenM Offline
                                  mariusjopenM Offline
                                  mariusjopen
                                  Global Moderator
                                  wrote on last edited by
                                  #16

                                  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
                                  0
                                  • arminunruhA Offline
                                    arminunruhA Offline
                                    arminunruh
                                    Global Moderator
                                    wrote on last edited by
                                    #17

                                    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
                                    0
                                    • J Offline
                                      J Offline
                                      jspinkus
                                      wrote on last edited by jspinkus
                                      #18

                                      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
                                      -1
                                      • J Offline
                                        J Offline
                                        jspinkus
                                        wrote on last edited by
                                        #19

                                        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
                                        0
                                        • mariusjopenM Offline
                                          mariusjopenM Offline
                                          mariusjopen
                                          Global Moderator
                                          wrote on last edited by
                                          #20

                                          Dear @juanpinkus
                                          really happy that you got it!

                                          Best!

                                          Marius

                                          www.mariusjopen.world

                                          1 Reply Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          I also code custom websites or custom Lay features.
                                          💿 Email me here: 💿
                                          info@laytheme.com

                                          Before you post:
                                          1. When using a WordPress Cache plugin, disable it or clear your cache.
                                          2. Update Lay Theme and all Lay Theme Addons
                                          3. Disable all Plugins
                                          4. 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:
                                          1. Post a link to where the problem is
                                          2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                                          3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                                          Online Users
                                          Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                                          laytheme.com
                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Recent
                                          • Tags
                                          • Popular
                                          • Users
                                          • Search