Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Using carousel feature as a cover (or full row bg image)

    General Discussion
    2
    4
    528
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • dani
      dani last edited by dani

      Hi Armin,

      I'm wondering if there is a easy way to combine the code for a carousel and cover feature.
      ie. I want to have a fading slideshow that functions just a cover (fills the browser width and height).
      Or if there is a way to adjust the carousel with css so it adjusts to 100vh/100vw, that could work too.
      (something like an option on the carousel instance 'use as full row bg image).

      Here is the carousel without left/right margins, but there is still a bottom margin but the browser edge is as an absolute boundary, unlike a cover or full row bg image.

      http://visuel.org/sg

      Thank you!
      Dani

      https://danielcampbell.ca

      1 Reply Last reply Reply Quote 1
      • mariusjopen
        mariusjopen Global Moderator last edited by

        Hi Dani,

        until now there is not an official feature for that option.

        But what you can do is the following:

        Add a custom class to your carousel. You can do this by right clicking on the carousel image 0_1489765767203_Bildschirmfoto 2017-03-17 um 16.48.59.png
        Then give the carousel a custom class like carousel-full.

        Then you can add a custom CSS code to your theme:

        .carousel-full {
            height: 100vh;
        }
        
        .lay-carousel.sliding {
            height: 100vh;
        }
        
        .col .lay-carousel img.h100 {
            object-fit: cover;
            height: 100vh;
            width: 100vw;
        }
        
        

        The code above is maybe not compatible with all Browsers. For example Internet Explorer has trouble using those CSS styles.

        Then the carousel has the window height and width.
        Try to keep all the images with the same aspect ratio. Which means they should all have the same height and width.

        I hope I was able to help. If you have further questions – please let us know.

        Enjoy your weekend!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • dani
          dani last edited by

          Thank you Marius,

          as it's not working with the proportions (like a cover) I'll use another solution and maybe you can include this feature in future updates.

          Best,
          Daniel

          https://danielcampbell.ca

          1 Reply Last reply Reply Quote 0
          • mariusjopen
            mariusjopen Global Moderator last edited by

            Hi Daniel,

            all right!
            If you have questions – you can always let us know.

            Have a good week!

            Marius

            www.mariusjopen.world

            1 Reply Last reply Reply Quote 0
            • First post
              Last post

            I don't answer or check forum DMs, please just post on the forum.

            Try this to fix issues before you post:

            Use the Search Feature. Maybe there is already a solution to your issue.

            1. Update Lay Theme and all Lay Theme Addons
            2. Disable all Plugins
            3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
            4. Now see if your problem solved itself
            5. Go here, see if your problem is listed here:
            Troubleshooting

            When you post:
            1. Post a link to where the problem is
            2. If the problem is difficult to explain, post screenshots / link to a video to explain it

            Thanks!

            Online Users

            L

            Recent Topics

            • M

              Tag filter / Maximum width

            • open all links in a thumbnail grid in a new tab

            • text underline

            • centred Carousel fixed width and proportions

            laytheme.com