Fullwidth and fullheight slider

  • rockysaxxx

    (@rockysaxxx)


    7 years, 7 months ago

    Hi,
    I really like your plugin, it is very straightforward and not overly complicated like so many other slider plugins!
    Please, could you help me with the following: I need to create a hero image slider on my homepage, where the slider images are always 100vh and 100vw of the screen – on mobile, tablet and desktop. I cannot find out how to achieve this. I have placed the slider in a row that has the following css added:

     .row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 left: 50%;
}

    but I cannot figure out how to make the slider always 100vh…

    Thank you so much!!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author simonpedge

    (@simonpedge)

    7 years, 7 months ago

    well try starting with the following CSS:

    #SLIDER_ID {
height:500px !important;
height:100vh !important;
}
#SLIDER_ID .owl-item,
#SLIDER_ID .owl-item > DIV {
height:100% !important;
}

    This is probably just the start, but a bit difficult without a URL link to look at.
    Note: as ‘vh’ is not 100% supported by all browsers, you need a fallback, that’s why I have the ‘height:500px’.

    Thread Starter rockysaxxx

    (@rockysaxxx)

    7 years, 7 months ago

    Thank you so much, that helped already quite a bit!
    Two more things:

    #1 I want one slider image on the screen, so no carousel with different images but always only one image per slide. I have set everything to 1 (desktop, tablet, mobile) but still the images are cut off on the right side and the next image is partially displayed. You can see my settings here.

    #2 If I use the optimization plugin(Fast Velocity) which combines and defers js, the slider is not getting displayed. Do you by chance know or can guess which js file I would need to exclude from optimization in order for the slider to work correctly?

    Thanks for your help.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Fullwidth and fullheight slider’ is closed to new replies.