Lay Theme Forum

Hi,

i sent you an email ;)

@Blurred00 @arminunruh

Give the carousel you want to invert the class "reverse"

Add this to your Custom JS

<script>
window.laytheme.on("newpageshown", function(){
// Get the swiper-container element 
var swiperContainer = document.querySelector('.swiper-container');

// Check if the element exists and has the "reverse" class
if (swiperContainer && swiperContainer.classList.contains('reverse')) {
  // Add the dir="rtl" attribute
  swiperContainer.setAttribute('dir', 'rtl');
}
   });
</script>

and it should work!

But apparently it seems to be not possible to add classes to carousels. Is it a bug @arminunruh ?

Because when I remove the if statement out of the code it affects the .swiper-container and it inverts the direction.

Haven't tested out but you can try to:

1. Include the Lottie library in your project via CDN Link

<script src="lottie.min.js"></script>

2. Give the row you would like to assign the animation to a class oder id (e.g. #animation-container)

<script>
window.laytheme.on("newpageshown", function(){
const animationContainer = document.getElementById('animation-container'); // replace with your div ID
const animationData = {
  container: animationContainer,
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'your-animation.json' // replace with the path to your Lottie JSON file
};

const animation = lottie.loadAnimation(animationData);
});
</script>

4. Add this to your Custom CSS

#animation-container {
  background-image: url("data:image/svg+xml;utf8," + encodeURIComponent(animationData.container.innerHTML));
}

to make the created SVG your background-image

Good luck ;)

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.

@alasdair17

It can be done easily with custom css and a bit of js.
Use one of your rows to put that extra info in. Give it a class style and hide it with custom css.
Put a button somewhere to make the pop-up hide and show on click.

@minutes

try this. haven't tested it. maybe it works ;)

<script>
    window.laytheme.on("newpageshown", function(layoutObj, type, obj) {
        var slideTimeout;

        function moveHorizontalSection() {
            var activeSection = jQuery.fn.fullpage.getActiveSection();
            var nextSection = activeSection.index() + 1;

            if (nextSection <= jQuery.fn.fullpage.getSections().length) {
                jQuery.fn.fullpage.moveTo(nextSection, 0);
            } else {
                jQuery.fn.fullpage.moveTo(1, 0);
            }
        }

        slideTimeout = setInterval(moveHorizontalSection, 10000);
    });
</script>

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

Hi,
what is your approach in general? Do you have a design already and just need help with setting it up on laytheme or do you need somebody who is helping you with everything?