carousel customization

Starc · wrote on Feb 4, 2025, 3:38 PM

Hi @arminunruh,
I have some questions regarding the carousel code customization:

Is it possible to make the carousel overflow visible only on the left while keeping it hidden on the right? (Currently, I managed to make it visible, but it affects the entire X-axis.)
Can we disable vertical mouse scrolling within the carousel slides?
I tried applying the box-shadow effect and setting a transparent background on the container that I believe holds the slides, but without success. Is there a way to achieve the shadow effect without overlapping the adjacent carousel slides?
I would like to add a shadow on the right side so that the carousel appears to fade out at the edge. I know how to create the shadow effect, but I’m not sure which selector I should apply it to.

Carousel type "slide"

Thank you,
M.

arminunruh · wrote on Feb 13, 2025, 2:42 PM

no
you mean you use transition slide, and activated "mouse scroll"?
do u have a link?

.lay-carousel{
box-shadow: 10px 5px 5px red;
}

mh maybe inset shadow?
not sure if its possible ! https://stackoverflow.com/questions/5115427/how-can-i-add-a-box-shadow-on-one-side-of-an-element

sorry for the late reply

arminunruh · wrote on Feb 13, 2025, 2:46 PM

i think number 4 wont really work

arminunruh · Feb 13, 2025, 12:56 PM

ok to make point 4 work:
to get this bar on the right side that is a gradient from white to transparent:

put this in lay options → custom css & html → custom <head> content:

<script>
window.laytheme.on('newpageshown', function(){
    jQuery(".lay-carousel").each(function(){
        if(jQuery(this).find('.fadebar').length == 0){
            jQuery(this).append('<div class="fadebar"></div>');
        }
    })
})
</script>
<style>
    .fadebar{
        position: absolute;
        z-index: 1;
        right: 0;
        width: 50px;
        height: 100%;
        pointer-events: none;
        background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
    }
</style>

this adds a container: <div class="fadebar"></div> to all carousels and the css below makes it a gradient that you can click through

arminunruh · wrote on Feb 13, 2025, 5:57 PM

if you just want horizontal mouse scrolling, you can use the new transition scroll feature:

Starc · wrote on Feb 20, 2025, 7:18 AM

Thanks you for your help. I’ll study it in the next few days. Right now, I’m busy dealing with various issues from my first exports from local to remote. :)

Lay Theme Forum

carousel customization

Before you post:

When you post:

Online Users