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 make a project with a carousel as in the example?

How to make a project with a carousel as in the example?

Scheduled Pinned Locked Moved Addons
13 Posts 3 Posters 468 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.
  • arminunruhA Offline
    arminunruhA Offline
    arminunruh
    Global Moderator
    wrote on last edited by
    #4

    hey it seems that this website is not a lay theme website:
    https://naranjoetxeberria.com/loewe-x-ibiza/

    this page uses fullscreen slider, not carousel:
    http://alfredoardanza.com/test

    1 Reply Last reply
    0
    • F Offline
      F Offline
      fredyatb
      wrote on last edited by
      #5

      Good morning @Richard-Keith and @arminunruh.
      Yes, now I have the fullscreen Addon on my website but the link that passes you I do not know why it has been changed to www........../test when it is alfredoardanza.com/prueba. In this link I used the carousel and I placed the photos to test and that it stayed more or less as in the example but I do not get it

      If you can look at it and help me, I appreciate it.
      http://alfredoardanza.com/prueba

      Thanks :)

      F 1 Reply Last reply
      0
      • F fredyatb

        Good morning @Richard-Keith and @arminunruh.
        Yes, now I have the fullscreen Addon on my website but the link that passes you I do not know why it has been changed to www........../test when it is alfredoardanza.com/prueba. In this link I used the carousel and I placed the photos to test and that it stayed more or less as in the example but I do not get it

        If you can look at it and help me, I appreciate it.
        http://alfredoardanza.com/prueba

        Thanks :)

        F Offline
        F Offline
        fredyatb
        wrote on last edited by
        #6

        I would like to be able to put the image smaller and that the carousel was from one side of the screen to the other, not that it was only the width of the png or the cropped photo.

        1 Reply Last reply
        0
        • RichardR Offline
          RichardR Offline
          Richard
          Global Moderator
          wrote on last edited by
          #7

          Dear @fredyatb

          Just to let you know that i'm looking into it and will get back to you tomorrow :)

          Thank you for using Lay Theme.

          Best wishes
          Richard

          F 1 Reply Last reply
          0
          • RichardR Richard

            Dear @fredyatb

            Just to let you know that i'm looking into it and will get back to you tomorrow :)

            Thank you for using Lay Theme.

            Best wishes
            Richard

            F Offline
            F Offline
            fredyatb
            wrote on last edited by
            #8

            @Richard-Keith Thanks!! :)

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

              Dear @fredyatb

              I had replied (tomorrow) but obviously a mistake on my part with the message getting through!!!!

              Using Custom CSS in "Lay Options"

              Screen Shot 2020-08-23 at 2.10.53 PM.png
              I have changed the carousel to "80vh" and given it a "margin-top" of 10vh.

              Screen Shot 2020-08-23 at 2.07.19 PM.png

              We could create the necessary space above the carousel with the "top frame" option in the gridder:

              Screen Shot 2020-08-23 at 2.22.58 PM.png

              secondly we could apply a top frame to all pages if this works for you in 'Gridder Defaults' :

              Screen Shot 2020-08-23 at 2.22.19 PM.png

              Thirdly we could add a custom class to your carousel and target it with Custom CSS:

              Screen Shot 2020-08-23 at 2.17.32 PM.png

              Screen Shot 2020-08-23 at 2.12.34 PM.png

              As well as making our carousel "80vh"

              Screen Shot 2020-08-23 at 2.12.47 PM.png

              Adding the Margin top in CUSTOM CSS:

              Screen Shot 2020-08-23 at 2.15.24 PM.png

              Hope this Helps!!

              Best Wishes
              Richard

              F 1 Reply Last reply
              0
              • RichardR Richard

                Dear @fredyatb

                I had replied (tomorrow) but obviously a mistake on my part with the message getting through!!!!

                Using Custom CSS in "Lay Options"

                Screen Shot 2020-08-23 at 2.10.53 PM.png
                I have changed the carousel to "80vh" and given it a "margin-top" of 10vh.

                Screen Shot 2020-08-23 at 2.07.19 PM.png

                We could create the necessary space above the carousel with the "top frame" option in the gridder:

                Screen Shot 2020-08-23 at 2.22.58 PM.png

                secondly we could apply a top frame to all pages if this works for you in 'Gridder Defaults' :

                Screen Shot 2020-08-23 at 2.22.19 PM.png

                Thirdly we could add a custom class to your carousel and target it with Custom CSS:

                Screen Shot 2020-08-23 at 2.17.32 PM.png

                Screen Shot 2020-08-23 at 2.12.34 PM.png

                As well as making our carousel "80vh"

                Screen Shot 2020-08-23 at 2.12.47 PM.png

                Adding the Margin top in CUSTOM CSS:

                Screen Shot 2020-08-23 at 2.15.24 PM.png

                Hope this Helps!!

                Best Wishes
                Richard

                F Offline
                F Offline
                fredyatb
                wrote on last edited by
                #10

                @Richard-Keith said in How to make a project with a carousel as in the example?:

                Dear @fredyatb
                I had replied (tomorrow) but obviously a mistake on my part with the message getting through!!!!
                Using Custom CSS in "Lay Options"

                Dont worry, I understand that you have to attend to many things and with your answer I am grateful.
                I try it now :)

                1 Reply Last reply
                0
                • F Offline
                  F Offline
                  fredyatb
                  wrote on last edited by
                  #11

                  HI again.
                  -I have applied the changes but it leaves me a lot of space at the top, it is not completely centered.
                  -Background photos should be full size and not the same size as the pages of the book.
                  -The text is very extended from margin to margin, how could I make it stay centered and in block.

                  1 Reply Last reply
                  0
                  • F Offline
                    F Offline
                    fredyatb
                    wrote on last edited by
                    #12

                    http://alfredoardanza.com/prueba

                    1 Reply Last reply
                    0
                    • RichardR Offline
                      RichardR Offline
                      Richard
                      Global Moderator
                      wrote on last edited by
                      #13

                      Dear @fredyatb

                      Three Questions - Three answers

                      1 - Change the "Margin-top" from 10vh to 3.5vh or 4 vh depending on what you prefer, play around and set the webpage how you like it.

                      2 - The Background photo's should be full size of the Carousel? or full size of the webpage? the Carousel has a wide viewport on it filling up the space and enlarging the images would either crop areas away or stretch quite badly your image. Am i correct in what you are after maybe?

                      3 - As for the text - add this code and play with the percentages equally ( should equal each other ) to create the distance you desire from the sides of the browser.

                      p._ABOUT {
                          padding-left:25%;
                          padding-right:25%;
                      }
                      

                      Hope this Helps :)

                      Best Wishes
                      Richard

                      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
                      A
                      alasdair17
                      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