Support » Plugin: MetaSlider » Is there a way to set the background color per slide

  • Resolved Matt Lovett

    (@mdeluk)



    Hi

    Due to different screen sizes I want to set a background color for each slide that surrounds it.

    Is this possible using MetaSlider?

    Cheers.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Contributor kbatdorf

    (@kbat82)

    Hi @mdeluk,

    We don’t have a built in way but it could be done with CSS. Are you familiar with CSS child selectors?

    https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

    You would have to identify the container of the slide you want then select each one. If you get started and can share a URL I can take a quick look.

    Hey @kbatdorf,

    Thanks for the quick reply. Honestly not really, my knowledge of CSS is still fairly basic.

    I thought I might be able to give each slide a class and then target the class, but I guess this is not the way to do it then?

    I have built the slider you can take a look here – https://www.wowmedia.net (I appreciate the 2nd slide still won’t look correct with a solid blue background for example, it’s just an example image for now).

    Appreciate any help you can provide! 🙂

    Plugin Contributor kbatdorf

    (@kbat82)

    Hey @mdeluk,

    Sorry for the delay, you had just caught me as I was leaving yesterday 🙂

    You could try adding something like this to your stylesheet:

    .metaslider .slides li:nth-child(2) {
        background-color: darkred;
    }

    Let me know if that’s what you’re looking for.

    Hey @kbatdorf,

    No worries at all! 🙂

    Hmm I tried this but it didn’t seem to work.

    Didn’t seem to have any effect at all. Am I missing something? I have added it to the CSS if you don’t mind taking a look to see if I have done something wrong.

    Cheers

    • This reply was modified 1 month, 2 weeks ago by  Matt Lovett.
    Plugin Contributor kbatdorf

    (@kbat82)

    Hi @mdeluk,

    I see the style but the image is covering the entire area so the color wont be seen. You would see it if the image were transparent. Maybe I’m not sure what exactly you’re trying to accomplish here. Can you share a screenshot maybe?

    Hey @kbat82

    Sorry I probably wasn’t very clear, I mean the color next to the image on the left and right on larger screens.

    See the below screenshot:
    http://prntscr.com/m492uu

    Let me know if there is a way to set this? Cheers 🙂

    Matt

    Plugin Contributor kbatdorf

    (@kbat82)

    Hey Matt,

    That are isn’t a part of the slideshow so you wont be able to. However, maybe you want to set the slideshow to 100%? You can check the box under advanced settings on the slideshow settings page.

    Ah yeah that is what I figured to be honest but I was hoping I was wrong! Ha.

    Hmm yeah setting to 100% isn’t too bad a solution although it ignores the height setting then.

    I could cut the image so it has less height so when stretched it doesn’t go over the height I want but then its not going to look right on mobile.

    Is there any way I can centre crop the image on larger screens so it doesn’t have as much height? Or force a height restriction on the slider?

    Plugin Contributor kbatdorf

    (@kbat82)

    Hi @mdeluk,

    There’s a cropping setting for each slide, but it will still stretch.

    You could set it up the slideshow with some custom CSS to change the positioning and max-height but that’s out of the scope for what I can help with as it depends on your theme and requires some custom tweaking.

    You could just leave it at 100% width, which is pretty common I think.

    Let me know if you have any more questions

Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.