Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Carousel full screen

    Addons
    9
    22
    3918
    Loading More Posts
    • 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
      mountain last edited by

      Good afternoon, my name is daniel
      I'm trying to do a carousel full screen, this is possible?

      Best regards

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

        Hi Daniel!

        until now there is not an official feature for that option.

        But what you can do is the following:

        Add a custom class to your carousel. You can do this by right clicking on the carousel image
        0_1490707252041_1489765767460-bildschirmfoto-2017-03-17-um-16.48.59.png

        Then give the carousel a custom class like carousel-full.

        Then you can add a custom CSS code to your theme:

        .carousel-full {
            height: 100vh;
        }
        
        .lay-carousel.sliding {
            height: 100vh;
        }
        
        .col .lay-carousel img.h100 {
            object-fit: cover;
            height: 100vh;
            width: 100vw;
        }
        

        The code above is maybe not compatible with all Browsers. For example Internet Explorer has trouble using those CSS styles.

        Then the carousel has the window height and width.
        Try to keep all the images with the same aspect ratio. Which means they should all have the same height and width.

        I hope I was able to help. If you have further questions – please let us know.

        Enjoy your weekend!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • L
          lve last edited by

          Hello Marius,

          I have the same problem; I'd like the carousel on my homepage to be fullscreen, and the other carousels in my website just normal/smaller on the page.
          Now I'm trying to use the code you suggested. When I click on 'edit html class and id' I see a screen with 2 fill-in boxes: 'class' and 'id'. What do I fill in here? I tried the code you suggested above here, but that doesn't work. I'm not experienced in coding obviously ;)

          Hope to hear from you.
          Thanks!

          1 Reply Last reply Reply Quote 0
          • L
            lve last edited by

            Hi Marius,

            So, I've typed in for 'class' and 'id', and then copied your code into Custom CSS for Desktop Version in Lay options.
            But it doesn't do anything. Can you help me with this?
            (It says: Unknown property: 'object-fit')

            1 Reply Last reply Reply Quote 0
            • L
              lve last edited by

              I think it works right now, but it works on all my carousel slideshows! Not only the one I assigned the code to. That's strange, could you tell me how to solve this?

              L M 2 Replies Last reply Reply Quote 0
              • L
                lemo @lve last edited by

                It's not working for me. It also says: ... Unknown property: 'object-fit'... I can not even make it as far as Lve :(

                What am I missing?

                1 Reply Last reply Reply Quote 0
                • mariusjopen
                  mariusjopen Global Moderator last edited by

                  Hello,

                  sorry I was not too specific.

                  You need to add carousel-full as a class. Because this class gets called by the custom CSS here:

                  .carousel-full {
                      height: 100vh;
                  }
                  

                  Let me know if that worked for you!

                  All the best!

                  Marius

                  www.mariusjopen.world

                  L 1 Reply Last reply Reply Quote 0
                  • M
                    Mariinus @lve last edited by

                    @lve said in Carousel full screen:

                    I think it works right now, but it works on all my carousel slideshows! Not only the one I assigned the code to. That's strange, could you tell me how to solve this?

                    I'm having this exact same problem, when I put the class in front of it the css doesn't trigger this function anymore.

                    Though I only want the object-fit and height/width 100vh/vw to be triggered on the .carousel-full class

                    1 Reply Last reply Reply Quote 0
                    • M
                      Mariinus last edited by

                      Fixed it,

                      .carousel-full {
                          height: 100vh;
                      }
                      
                      .carousel-full .lay-carousel-wrap {
                          height: 100vh !important;
                      }
                      
                      .carousel-full img.h100 {
                          object-fit: cover;
                          height: 100vh !important;
                          width: 100%;
                      }
                      
                      1 Reply Last reply Reply Quote 0
                      • L
                        lemo @mariusjopen last edited by

                        @mariusjopen Hello,

                        It still doesn't work for me. It always says: ... Unknown property: 'object-fit' ... can't get past this point.

                        What am I doing wrong?

                        0_1502194346903_help.png

                        Thanks!!!

                        1 Reply Last reply Reply Quote 0
                        • mariusjopen
                          mariusjopen Global Moderator last edited by

                          Hi Lemo,
                          can you upload your website that I can have a look.

                          Maybe it is also connected to the spaces in front of the object-fit.

                          Can you delete them and see what happens?

                          Also object fit is not supported on all browsers:
                          0_1502273582950_Bildschirmfoto 2017-08-09 um 12.12.41.png

                          Speak you soon!

                          Marius

                          www.mariusjopen.world

                          L 1 Reply Last reply Reply Quote 0
                          • A
                            alidarosie last edited by

                            Hello Marius, I'm also trying to implement a full screen carousel but am struggling. I would like a full screen carousel to responsively fill the screen so the image is not cut off at the bottom, with a floating 'close' button in the top right like this example: http://www.querida.si/wet-poster
                            Could you please explain how is this done?

                            A 1 Reply Last reply Reply Quote 0
                            • A
                              alidarosie @alidarosie last edited by

                              I also notice that the text is responsive in this example?

                              1 Reply Last reply Reply Quote 0
                              • L
                                lemo @mariusjopen last edited by

                                @mariusjopen

                                Thanks for your help! I managed to make it work.

                                1 Reply Last reply Reply Quote 0
                                • mariusjopen
                                  mariusjopen Global Moderator last edited by

                                  Hi @lemo

                                  great news! Can you post in the forum how you did it?

                                  Best!

                                  Marius

                                  www.mariusjopen.world

                                  1 Reply Last reply Reply Quote 0
                                  • E
                                    evey_k last edited by

                                    Dear @Mariinus,
                                    I've found this thread while i have a problem adapting my Carousel into fullscreen.
                                    My header images somehow still are not adjusted based on the appropriate screen size.
                                    Do you think you could help me please?

                                    http://eveykwong.com

                                    1 Reply Last reply Reply Quote 0
                                    • E
                                      evey_k last edited by

                                      0_1573334443893_Screenshot 2019-11-09 at 22.20.05.png

                                      Here is the screenshot of the Custom CSS .. something is definitely not right here, but i have no idea how to fix it. @Mariinus

                                      1 Reply Last reply Reply Quote 0
                                      • mariusjopen
                                        mariusjopen Global Moderator last edited by

                                        Dear @evey_k
                                        you were almost there.
                                        Just add this here:

                                        .flickity-viewport {
                                            height: 100vh;
                                        }
                                        
                                        

                                        Best!

                                        Marius

                                        www.mariusjopen.world

                                        E 1 Reply Last reply Reply Quote 0
                                        • E
                                          evey_k @mariusjopen last edited by

                                          @mariusjopen
                                          Hi Marius, thanks alot for your help!
                                          My problem remains that the forward/previous arrow on the carousel is not quite in the middle at certain size of the browser. somehow it doesn't stay at the middle spot.

                                          http://eveykwong.com/

                                          1 Reply Last reply Reply Quote 0
                                          • mariusjopen
                                            mariusjopen Global Moderator last edited by mariusjopen

                                            Dear @mountain
                                            play around with this:

                                            button.flickity-prev-next-button.next {
                                                top: 54vh;
                                            }
                                            

                                            Best!

                                            Marius

                                            www.mariusjopen.world

                                            1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            I don't answer or check forum DMs, please just post on the forum.

                                            Try this to fix issues before you post:

                                            Use the Search Feature. Maybe there is already a solution to your issue.

                                            1. Update Lay Theme and all Lay Theme Addons
                                            2. Disable all Plugins
                                            3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                                            4. Now see if your problem solved itself
                                            5. Go here, see if your problem is listed here:
                                            Troubleshooting

                                            When you post:
                                            1. Post a link to where the problem is
                                            2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                                            Thanks!

                                            Online Users

                                            C
                                            M
                                            S
                                            M
                                            C

                                            Recent Topics

                                            • T

                                              thumbnail grid categories fixed.

                                            • L

                                              BLEND MODE ON MOBILE

                                            • A

                                              A modal/pop up window displaying extra info

                                            • Carousel is not showing

                                            laytheme.com