carousel customization

[Starc]

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

1. 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.)
2. Can we disable vertical mouse scrolling within the carousel slides?
3. 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?
4. 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]

1. no

2. you mean you use transition slide, and activated "mouse scroll"?

3. do u have a link?

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

4. 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]

i think number 4 wont really work

[arminunruh]

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]

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

[Starc]

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. :)