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

                              Dear @TE

                              This i quite a long thread now over 3 years.
                              If not too much trouble are you able to make a new thread with a description of the issue and a link to your website with the example carousel in question,

                              Feel free to link back to this thread if you wish!

                              Sorry if this is annoying but the topic has grown so much since 2017 :)

                              Sincerely
                              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