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. Carousel full screen

Carousel full screen

Scheduled Pinned Locked Moved Addons
22 Posts 9 Posters 5.0k 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.
  • mariusjopenM Offline
    mariusjopenM Offline
    mariusjopen
    Global Moderator
    wrote on last edited by
    #2

    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
    0
    • L Offline
      L Offline
      lve
      wrote on last edited by
      #3

      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
      0
      • L Offline
        L Offline
        lve
        wrote on last edited by
        #4

        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
        0
        • L Offline
          L Offline
          lve
          wrote on last edited by
          #5

          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
          0
          • L lve

            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 Offline
            L Offline
            lemo
            wrote on last edited by
            #6

            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
            0
            • mariusjopenM Offline
              mariusjopenM Offline
              mariusjopen
              Global Moderator
              wrote on last edited by
              #7

              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
              0
              • L lve

                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?

                M Offline
                M Offline
                Mariinus
                wrote on last edited by
                #8

                @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
                0
                • M Offline
                  M Offline
                  Mariinus
                  wrote on last edited by
                  #9

                  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
                  0
                  • mariusjopenM mariusjopen

                    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

                    L Offline
                    L Offline
                    lemo
                    wrote on last edited by
                    #10

                    @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
                    0
                    • mariusjopenM Offline
                      mariusjopenM Offline
                      mariusjopen
                      Global Moderator
                      wrote on last edited by
                      #11

                      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
                      0
                      • A Offline
                        A Offline
                        alidarosie
                        wrote on last edited by
                        #12

                        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
                        0
                        • A alidarosie

                          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 Offline
                          A Offline
                          alidarosie
                          wrote on last edited by
                          #13

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

                          1 Reply Last reply
                          0
                          • mariusjopenM mariusjopen

                            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

                            L Offline
                            L Offline
                            lemo
                            wrote on last edited by
                            #14

                            @mariusjopen

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

                            1 Reply Last reply
                            0
                            • mariusjopenM Offline
                              mariusjopenM Offline
                              mariusjopen
                              Global Moderator
                              wrote on last edited by
                              #15

                              Hi @lemo

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

                              Best!

                              Marius

                              www.mariusjopen.world

                              1 Reply Last reply
                              0
                              • E Offline
                                E Offline
                                evey_k
                                wrote on last edited by
                                #16

                                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
                                0
                                • E Offline
                                  E Offline
                                  evey_k
                                  wrote on last edited by
                                  #17

                                  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
                                  0
                                  • mariusjopenM Offline
                                    mariusjopenM Offline
                                    mariusjopen
                                    Global Moderator
                                    wrote on last edited by
                                    #18

                                    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
                                    0
                                    • mariusjopenM mariusjopen

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

                                      .flickity-viewport {
                                          height: 100vh;
                                      }
                                      
                                      

                                      Best!

                                      Marius

                                      E Offline
                                      E Offline
                                      evey_k
                                      wrote on last edited by
                                      #19

                                      @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
                                      0
                                      • mariusjopenM Offline
                                        mariusjopenM Offline
                                        mariusjopen
                                        Global Moderator
                                        wrote on last edited by mariusjopen
                                        #20

                                        Dear @mountain
                                        play around with this:

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

                                        Best!

                                        Marius

                                        www.mariusjopen.world

                                        1 Reply Last reply
                                        0
                                        • T Offline
                                          T Offline
                                          TE
                                          wrote on last edited by
                                          #21

                                          @evey_k said in Carousel full screen:

                                          @mariusjopen

                                          Dear @mariusjopen

                                          I have managed to reach a full screen setup with css however my text slide is being cut at the bottom. The setting for Vertical Alignment of Text Slides is set to middle.

                                          my custom css is:

                                          .carousel-full {
                                          height: 100vh;
                                          }

                                          .carousel-full .lay-carousel-wrap {
                                          height: 100% !important;
                                          }

                                          .carousel-full img.h100 {
                                          object-fit: cover;
                                          height: 100vh !important;
                                          width: 100%;
                                          }

                                          .flickity-viewport {
                                          height: 100vh;
                                          }

                                          Need your help here:)

                                          cheers

                                          Tal

                                          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