Lay Theme Forum

@mariusjopen
Thank you for your help!

@mariusjopen

Here's the site.
alestella.info
I have implemented this code with overflow to avoid extra scrolling and custom css to center carousel.
I am wondering if there's a better solution to this since I would still like to scroll on mobile.

HTMl Head content:

<style type="text/css">
html {
overflow-y: hidden;
}

CUSTOM CSS:
.col .lay-carousel-wrap {
position: relative;
top:-70px;
width: auto;
height: 100%;
left: 0;
}

I placed this:

HTMl Head content:

<style type="text/css">
html {
overflow-y: hidden;
}

CUSTOM CSS:
.col .lay-carousel-wrap {
position: relative;
top:-70px;
width: auto;
height: 100%;
left: 0;
}

Although the hidden overflow solves the scrolling issue it does not take care of the center horizontal alignment of carousel.
I would like to keep intact the mobile version since I am deploying scrolling on device.

In Custom CSS, the lay carousel wrap class with top-60px seems to be working although I do think it's a cheat that takes care of something else going on.
In addition images seems to be slightly cropped.
Do you have a more functional and elegant solution?

Thanks!

@mariusjopen

Yes I can totally add the top line with HTML and tweak properties with CSS.
However, do you have any suggestion for the height of the browser itself?
I want to avoid scrolling. As the page first loads the carousel is not center and you need to scroll down for it to be in place.

My intention is to have no extra space top or below and have the carousel centered with no ability to scroll.
I set the frame with fixed Height 100vh and took out any margins but no luck as you can see from the screenshot:

Thanks!

Thank you @mariusjopen

Everything seems to be back to normal the only problem I have at this point is that my carousel seems to not be center to the browser height.
As you can the the text line at the top should have same margin as the captions at the bottom and images should be centered horizontally and vertically,

Any suggestions?
Thanks a lot!

Re: Carousel error Failed to load resource / Failed to parse SourceMap

Hello were you able to solve the issue?
I am having the same problem with my website.
Unfortunately I am not able to see any of my content. When I opened the developer tools I saw these errors:

DevTools failed to load SourceMap: Could not load content for http://www.alestella.info/wp-content/plugins/laytheme-carousel/frontend/assets/js/vendor/swiper.min.js.map

Uncaught ReferenceError: _ is not defined
at carousel.plugin.min.js?ver=1.6.1:3
at carousel.plugin.min.js?ver=1.6.1:3

Uncaught TypeError: Cannot read property 'attr' of null
at n (magneticslides.plugin.min.js?ver=1.4.9:3)
at a (magneticslides.plugin.min.js?ver=1.4.9:3)
at _ (magneticslides.plugin.min.js?ver=1.4.9:3)
at r.Channel.<anonymous> (magneticslides.plugin.min.js?ver=1.4.9:3)
at m (frontend.app.min.js?ver=2.9.8:1)
at v (frontend.app.min.js?ver=2.9.8:1)
at d (frontend.app.min.js?ver=2.9.8:1)
at r.Channel.u.trigger (frontend.app.min.js?ver=2.9.8:1)
at Object.triggerSizeChanged (frontend.app.min.js?ver=2.9.8:1)
at A (frontend.app.min.js?ver=2.9.8:1)

Site:
alestella.info

I have de-activated all plugins and custom css from the site but the problem persists.
Any ideas?

Thanks!

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

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!

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!

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

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!