Hi,

i sent you an email ;)

For me it still works.
What exactly doesn’t work in your case?
Maybe I can help.

Have you tried the “Stack Element” tool?

https://laytheme.com/documentation.html

Good luck!

hi @alessiarodler

you need to code it yourself.

Have a look here!

Add the HTML, JS and CSS in Custom CSS and style the HTML and CSS the way you like.

It's not that difficult :)

Good luck!

https://codepen.io/13twelve/pen/EoKLYX

https://github.com/mizansyed/wdImageStax

@felix_rabe

I bought this plugin. There you can set up different profiles for different backend users depending on what they will be able to see in the dashboard etc.

Additionally you can add custom css in the plugin where you can hide laygridder options. Use the web inspector of your browser to detect specific classes and Id's you want to hide away and add

display:none !important

Takes a little while but works pretty well. At the end you can export your settings and import them on another client's website.

The code snipped is tested and works with a vertical slider. If yours is a horizontal one you probably need to change the direction:

jQuery.fn.fullpage.moveSectionDown()

to

jQuery.fn.fullpage.moveSlideRight()

Write me a pm if you need further help.

You got mail!

Here you go!

Put this in your custom js:

<script>
    window.laytheme.on("newpageshown", function(layoutObj, type, obj){
    jQuery.fn.swinger = function () {
    return this.each(function () {
        var $container = jQuery(this);
        $container.css({
            "position": "relative"
        });
        var $images = $container.find("img");
        $images.css({
            "position": "absolute",
            "top": "0%",
            "left": "0%",
            "width": "100%"
        });
        var $middleImage = jQuery($images[Math.floor($images.length / 2)]);
        $middleImage.css({
            "z-index": "2",
            "position": "relative"
        });
        var columnsCount = $images.length;
        $images.each((i, img) => {
            var left = `${100 / columnsCount * i}%`;
            var width = `${100 / columnsCount}%`;
            var $column = jQuery(`<span style="z-index:999;position:absolute;top:0;bottom:0;left:${left};width:${width}"></span>`);
            jQuery(img).after($column);
            $column.hover(() => {
                $images.css({
                    "z-index": "1",
                    "position": "absolute"
                });
                jQuery(img).css({
                    "z-index": "2",
                    "position": "relative"
                });
            });
        })
    });
}
});   
</script>

<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
      jQuery(".img-area").swinger();
});
</script>

Then add your images via "+More" > +HTML" in your laygridder. Give the row the class "img-area". Should work like this.

I wrote You a pm! Let’s see what I can do for you :)

@littlegestalt

Dm!

@Johan-Saj

Haven't tested it but what about adding an animation to the img via css

.lay-imagehover-region img {
  animation: rotation 5s infinite linear;
}

@keyframes rotation {
  100% {transform: rotate(360deg);}
}}

@thomasmaier

It just fixed my fullscreen slider. Haven’t tested it with the carousel addon

Here's a little workaround.
Try adding following code in your Custom CSS:

*:not(html) {
    -webkit-transform: translate3d(0, 0, 0);
}

That once fixed it for me with the Fullscreen Slider.

Don't know if it still works.

What do u like to do?

1.. give the content of the first row a width of 50%
2. give the second row a class - e.g. .sticky-row
3. wrap the .sticky-row into a scrollable div with css and jquery and give it a 50% width
4. done! :)

@mayar_elbakry still looking for help?

Could be that the code is for any reason only working for the vertical fullscreen slider.

Why don't you just use the carousel plugin for a horizontal slideshow? There you can set up a counter without custom code.

Sorry that I can't help you any further with that.

Awesome website btw.

For me it still works.
What exactly doesn’t work in your case?
Maybe I can help.

Texted you on insta :)