Lay Theme Forum

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

    Carousel Full Screen and Swipe Speed

    Addons
    2
    12
    904
    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.
    • lousydeal
      lousydeal last edited by

      Hello,
      Thank you for the amazing theme you guys created.

      _I was following this thread: http://laythemeforum.com:4567/topic/1152/carousel-full-screen/2
      as I wanted to feature in my website a full screen carousel option.
      Now my website is a one page and I would like to have different carousels full screen one after the other with no padding in between. Here is the link: alestella.info/alt

      _My secondary menu has submenus that work as anchor points and I am redirecting them to specific carousels on the page so that the user is able to navigate the page just by clicking on the links at the bottom. Unfortunately, I have some problem with one carousel in particular which does not seem to behave like the other ones by having extra white spacing at the bottom.

      _Also one thing that I wanted to see if it was possible to work on the speed (attraction and friction) of the slider to slow it down a little. I followed this thread for mine but it is not working for me:
      http://laythemeforum.com:4567/topic/1008/use-browser-hight-center-column-carousel-speed/2

      Would love to hear if you guys have any suggestion.
      Thank you!

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

        Dear @lousydeal

        do those two links help you?

        ANCHOR LINK
        http://laythemeforum.com:4567/topic/2863/link-to-anchor-from-another-page/4

        SMOOTH LINK
        http://laythemeforum.com:4567/topic/2144/fade-effect-smooth-transitions-links-via-custom-html/2

        Let me know if you got further.

        Best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • lousydeal
          lousydeal last edited by

          Thank you @mariusjopen for these links!

          Any idea why I have some extra space added under the second carousel on alestella.info/alt
          Is there something that I am doing wrong? Every time one of the carousel seems to have extra padding at the bottom.

          I am following this code:

          .carousel-full {
          height: 100vh;
          }

          .lay-carousel.sliding {
          height: 100vh;
          width: 100vw;
          }

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

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

            Dear @lousydeal
            I cannot see that empty space:

            4_1542626001638_Bildschirmfoto 2018-11-19 um 12.12.19.png 3_1542626001638_Bildschirmfoto 2018-11-19 um 12.12.23.png 2_1542626001638_Bildschirmfoto 2018-11-19 um 12.12.16.png 1_1542626001638_Bildschirmfoto 2018-11-19 um 12.12.13.png 0_1542626001637_Bildschirmfoto 2018-11-19 um 12.12.11.png

            Can you send us a screenshot?

            Best!

            Marius

            www.mariusjopen.world

            1 Reply Last reply Reply Quote 0
            • lousydeal
              lousydeal last edited by lousydeal

              Hello @mariusjopen
              Thank you for your quick responses, I really appreciate it.
              I seem to have resolved that issue for now.

              1. Is there a way to control the speed of the carousel slider? I know from reading on the Flickity Web that it is a matter of attraction and friction. But I am not able to figure out a code to call out those functions. I would want to slow down the swipe from the default speed. for now I just fhave fade options just to make it work.

              2. I am still figuring out the best way to size my images to not get unpredictably cropped out when using some CSS code for carousel Full screen.
                Is this the latest version of the code that I could use in your opinion?
                This is the code that I found reading this thread: http://laythemeforum.com:4567/topic/3535/resize-images-in-slider/7
                And would I need to specify the id class when placing a carousel in the grid?

              .col .lay-carousel {
              height: 100vh;
              top: 0px !important;
              margin-top: 0px !important;
              padding: 0px !important;
              }

              .flickity-slider {
              height: 100vh;
              top: 0px !important;
              }

              .lay-carousel-slide {
              top: 0 !important;
              height: 100vh;
              margin-top: 0px !important;
              }

              .col .lay-carousel img.h100 {
              height: 100vh !important;
              top: 0;
              object-fit: cover !important;
              width: 100%;
              }

              1. Although I am having trouble with the loading time of images for now on both iMac and MacBook.
                What would you think is the best ration and resolution for the images to display full screen on both devices?
                I am following a 16:9 ration with 72dpi.

              Thank you for your time and patience!

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

                Dear @lousydeal

                1. not possible yet.

                2. Exactly. You can play around with object fit:

                .col .lay-carousel img.h100 {
                    height: 100vh !important;
                    top: 0;
                    object-fit: cover !important;
                    width: 100%;
                }
                

                https://www.w3schools.com/css/css3_object-fit.asp

                1. Images are getting resized by Wordpress. Can you send a link to the page where the images are loading slowly?

                Best!

                Marius

                www.mariusjopen.world

                1 Reply Last reply Reply Quote 0
                • lousydeal
                  lousydeal last edited by lousydeal

                  Hello @mariusjopen

                  Thank you I will play around with that.
                  Regarding the loading issue, here is the link:

                  alestella.info/alt

                  I am having trouble especially when scrolling:
                  The first image of each carousel seems to be loading slowly causing the white box selected in the default option of >lay options to appear.

                  Any idea why this would happen?

                  I thought It was the full screen carousel but even when deleting the code just discussed, the issue persists.

                  Thank you!

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

                    Dear @lousydeal
                    it looks like you are not using responsive images.
                    In LayOption you can have a look under this section:

                    0_1542886701329_Bildschirmfoto 2018-11-22 um 12.38.01.png

                    Best!

                    Marius

                    www.mariusjopen.world

                    1 Reply Last reply Reply Quote 0
                    • lousydeal
                      lousydeal last edited by lousydeal

                      @mariusjopen thank you for that.
                      it seems like it is slower on my computer especially but when I try on Chrome and others computer the problem seems to disappear.

                      I have another question regarding a fixedtext class that I have set to block so that images can float while text is fixed in the grid.
                      Here is the code that I am using:

                      .fixedtext {
                      position: fixed;
                      z-index: 10;
                      display: block;
                      }

                      My problem is that even though I have been playing around with z-index the text does not come on the foreground and the images keep to be hiding the text.
                      Do you have any suggestion in this regard?

                      Thank you!

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

                        Dear @lousydeal
                        can you post a link to the page where you want to apply this effect? Then we can have a closer look.

                        Best!

                        Marius

                        www.mariusjopen.world

                        1 Reply Last reply Reply Quote 0
                        • lousydeal
                          lousydeal last edited by

                          Yes!
                          Here you go:

                          alestella.info/indice

                          I basically would want the text in there to be fixed while the images scroll underneath in the background.

                          I managed the have the text fixed, although for example my mailto:email does not seem to follow the class.

                          Thank you!

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

                            Dear @lousydeal
                            I am not sure if I would go for this solution.

                            I would not give many rows the position fixed. Then you always need to tell them their position, etc.

                            There are two ways to go in my opinion.

                            1. But all the content you want to be fixed in one row and use the stack element. Then you can just tell that row to be position fixed.

                            2. Put the content which you want to position fixed in the CUSTOM HTML section. Then you can style it however you want it to be.

                            Hope I could help!

                            Marius

                            www.mariusjopen.world

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

                            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

                            Recent Topics

                            • N

                              website blank.

                            • S

                              Theme crashed - because of Polylang?

                            • S

                              New fade-in / opacity bug?

                            • A

                              Unable to update lay theme / to login wp admin

                            laytheme.com