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 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
                        W
                        wua.frank
                        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