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 and Swipe Speed

Carousel Full Screen and Swipe Speed

Scheduled Pinned Locked Moved Addons
12 Posts 2 Posters 1.1k 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.
  • lousydealL Offline
    lousydealL Offline
    lousydeal
    wrote on last edited by
    #1

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

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

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

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

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

              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
              0
              • lousydealL Offline
                lousydealL Offline
                lousydeal
                wrote on last edited by lousydeal
                #7

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

                  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
                  0
                  • lousydealL Offline
                    lousydealL Offline
                    lousydeal
                    wrote on last edited by lousydeal
                    #9

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

                      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
                      0
                      • lousydealL Offline
                        lousydealL Offline
                        lousydeal
                        wrote on last edited by
                        #11

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

                          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
                          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
                          J
                          jaredh
                          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