Is there a way to set the background color per slide

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! ??

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 5 years, 10 months ago by Matt Lovett.

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:
https://prntscr.com/m492uu

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

Matt

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?

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