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. How to position numbers on right side of carousel

How to position numbers on right side of carousel

Scheduled Pinned Locked Moved Addons
9 Posts 5 Posters 369 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.
  • M Offline
    M Offline
    marskid
    wrote on last edited by
    #1

    Hello,

    Is it possible to integrate the carousel numbers within the Gridder?

    Below is a sketch of what I would like to do: currently, the numbers sit on top of the images, but I would like them to be positioned on the right, with the text.

    I have limited custom CSS knowledge, any help would be deeply appreciated.

    Thank you,
    Emi

    Screen Shot 2020-05-03 -2.jpg

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

      Dear @marskid
      Are you familiar with CSS and a bit of jQuery? If not I would recommend to have a look into some tutorials at Codeacademy https://www.codecademy.com/.
      It is for free for the basics. The effect you are trying to achieve requires some knowledge and brainpower :-)

      Have a look here to get more info about the carousel plugin: http://laytheme.com/carousel.html.
      Best!
      Marius

      www.mariusjopen.world

      M 1 Reply Last reply
      1
      • mariusjopenM mariusjopen

        Dear @marskid
        Are you familiar with CSS and a bit of jQuery? If not I would recommend to have a look into some tutorials at Codeacademy https://www.codecademy.com/.
        It is for free for the basics. The effect you are trying to achieve requires some knowledge and brainpower :-)

        Have a look here to get more info about the carousel plugin: http://laytheme.com/carousel.html.
        Best!
        Marius

        M Offline
        M Offline
        marskid
        wrote on last edited by
        #3

        Hi @mariusjopen ,

        Thank you for your response, I really appreciate it. I will look into some tutorials!

        Best,
        Emi

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

          Dear @marskid
          Happy to help!
          Best!
          Marius

          www.mariusjopen.world

          1 Reply Last reply
          0
          • M marskid

            Hello,

            Is it possible to integrate the carousel numbers within the Gridder?

            Below is a sketch of what I would like to do: currently, the numbers sit on top of the images, but I would like them to be positioned on the right, with the text.

            I have limited custom CSS knowledge, any help would be deeply appreciated.

            Thank you,
            Emi

            Screen Shot 2020-05-03 -2.jpg

            M Offline
            M Offline
            marcos
            wrote on last edited by
            #5

            @marskid Maybe is too late / or you already figured it out but this is what I just did on a similar instance:

            .lay-carousel-sink-parent {
                     position: fixed!important;
                     bottom: 0!important;
                     right: 0!important;
            	margin-bottom: 2vw;
            	margin-right: 1.5vw;
              border: 0;
            }
            

            In your case you'll probably need to tinker with margin-top, etc...

            (I had previously tried the span.numbers class with no luck, the key seems to be to move the container inside which the numbers are placed)

            E 1 Reply Last reply
            3
            • arminunruhA Offline
              arminunruhA Offline
              arminunruh
              Global Moderator
              wrote on last edited by
              #6

              very good marcos!

              1 Reply Last reply
              0
              • M marcos

                @marskid Maybe is too late / or you already figured it out but this is what I just did on a similar instance:

                .lay-carousel-sink-parent {
                         position: fixed!important;
                         bottom: 0!important;
                         right: 0!important;
                	margin-bottom: 2vw;
                	margin-right: 1.5vw;
                  border: 0;
                }
                

                In your case you'll probably need to tinker with margin-top, etc...

                (I had previously tried the span.numbers class with no luck, the key seems to be to move the container inside which the numbers are placed)

                E Offline
                E Offline
                emresenoglu
                wrote on last edited by
                #7

                thanks @marcos - this does work for moving the numbers. however it also moved the captions. any way to prevent it from affecting captions, and if possible to exclude some pages?

                senoglu.co

                1 Reply Last reply
                0
                • E Offline
                  E Offline
                  emresenoglu
                  wrote on last edited by
                  #8

                  alt text

                  senoglu.co

                  1 Reply Last reply
                  0
                  • arminunruhA Offline
                    arminunruhA Offline
                    arminunruh
                    Global Moderator
                    wrote on last edited by
                    #9

                    hey maybe u can use the chrome inspector to find the correct css class

                    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
                    D
                    Double
                    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