Carousel Full Screen and Swipe Speed

[mariusjopen]

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

[lousydeal]

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;
}

[mariusjopen]

Dear @lousydeal
I cannot see that empty space:

Can you send us a screenshot?

Best!

Marius

[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%;
}

3. 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!

[mariusjopen]

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

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

Best!

Marius

[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!

[mariusjopen]

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

Best!

Marius

[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!

[mariusjopen]

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

[lousydeal]

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!

[mariusjopen]

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