Hello!
I’m looking for a way to target each arrow individually in css to change its position and change each background for an image, are you able to point me in the right direction?
The page isn’t published yet but I’m using the social feed widget for a carousel of facebook posts.
Thanks!
Welcome to the Community!
Could you please specify what position you’d like to have for the arrows? As for the background color, do you want to have an individual background color for the post under the image (option 1) or just a different background color around the images (option 2)?
Hey Max, thanks for the speedy response.
I’d like the arrows not to overlap with the cards at all, the left be around 50px left of the carousel and the right around 50px right of it!
And in terms of the background I mean the arrows themselves, I’d like to be able to customise the arrow in the css myself to make them https://static1.squarespace.com/static/65771af52289db0454e5b168/t/658c0ba3bc4ad16800a294c2/1703676835223/Carousel-arrow-left.png/*. So I just need to know how I can target them! Not having any luck trying to use the div classes when Inspecting the page
Here’s my overall goal for reference!
Got you!
I’ll check with our devs if anything can be done and will get back to you 
We’ve added this code to the Custom CSS field on the Appearance tab of your widget’s settings:
[class*="Carousel__CarouselSwiperWrapper-sc"] {
padding: 0 50px;
}
Check it out and let me know if you like what you see
As for the background color, you can change it in the Navigation Arrow section on the Appearance tab:
