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.
  • F Offline
    F Offline
    fredyatb
    wrote on last edited by
    #1

    Hi everyone.

    I am trying to do a project with a Carousel Addons in which they slide as in the example.
    https://naranjoetxeberria.com/loewe-x-ibiza/

    -I have tried with the images on a black background and cropping the elements as they are used on this website and I can't get it to stay full screen.

    -I have also observed that in the mobile version of the link that I have left you, the direction of the slide is vertical and not horizontal as in the desktop screen version. How could I choose for the mobile version?

    I cannot clear myself with the Carousel Addons settings.

    If anyone can help me I will be very grateful.
    Thanks.

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