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.
  • RichardR Offline
    RichardR Offline
    Richard
    Global Moderator
    wrote on last edited by
    #2

    Dear @fredyatb

    Is it possible to post a link to your site?
    Did you see this on the Carousel page at laytheme.com?

    "If “Use Custom Aspect Ratio” is checked, you can define a custom ratio that all images will fit in.

    “Fixed Height:” Enter "100vh" here to have a browser-height-filling carousel."

    But you could of course set the custom aspect ratio to what ever you wish such as 80vh.

    Best wishes
    Richard

    F 1 Reply Last reply
    0
    • RichardR Richard

      Dear @fredyatb

      Is it possible to post a link to your site?
      Did you see this on the Carousel page at laytheme.com?

      "If “Use Custom Aspect Ratio” is checked, you can define a custom ratio that all images will fit in.

      “Fixed Height:” Enter "100vh" here to have a browser-height-filling carousel."

      But you could of course set the custom aspect ratio to what ever you wish such as 80vh.

      Best wishes
      Richard

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

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

      Is it possible to post a link to your site?
      Did you see this on the Carousel page at laytheme.com?
      "If “Use Custom Aspect Ratio” is checked, you can define a custom ratio that all images will fit in.
      “Fixed Height:” Enter "100vh" here to have a browser-height-filling carousel."
      But you could of course set the custom aspect ratio to what ever you wish such as 80vh.
      Best wishes
      Richard

      Good morning @Richard-Keith, thank you very much for answering.

      I have activated a project that I have as a test, I will give you the link so you can see it: http://alfredoardanza.com/test.

      I have set "fixed height:" to "100vh" as you have told me and it looks very large. I want it to be smaller and tighter as in the editorial example that I showed you in which it is fitted to the screen and the scroll bar does not appear. https://naranjoetxeberria.com/loewe-x-ibiza/

      Thanks :)

      1 Reply Last reply
      0
      • arminunruhA Online
        arminunruhA Online
        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
                          arminunruhA
                          arminunruh
                          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