# How to customise carousel arrows

**URL:** <https://community.elfsight.com/t/how-to-customise-carousel-arrows/35546>\
**Category:** Customization\
**Tags:** social-feed\
**Created:** [December 27, 2023, 12:00pm UTC](https://community.elfsight.com/t/how-to-customise-carousel-arrows/35546 "2023-12-27T12:00:21Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sister\_Creative](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/sister_creative/32/15603_2.png) [@Sister\_Creative](https://community.elfsight.com/u/Sister_Creative)\
**Post date:** [December 27, 2023, 12:00pm UTC](https://community.elfsight.com/t/how-to-customise-carousel-arrows/35546/1 "2023-12-27T12:00:21Z")

</div>

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!

 ![Screenshot 2023-12-27 at 11.54.22](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/2X/6/6785fe11d7adf63279f9f86b099b17cbd99573c0.jpeg)

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [December 27, 2023, 12:30pm UTC](https://community.elfsight.com/t/how-to-customise-carousel-arrows/35546/3 "2023-12-27T12:30:49Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/2X/c/c78fb8b57af2fdfdac511a6c1557ff8acdb38d04.jpeg)

---

<div class="post-metadata">

**Author:** ![Sister\_Creative](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/sister_creative/32/15603_2.png) [@Sister\_Creative](https://community.elfsight.com/u/Sister_Creative)\
**Post date:** [December 27, 2023, 12:42pm UTC](https://community.elfsight.com/t/how-to-customise-carousel-arrows/35546/4 "2023-12-27T12:42:55Z")

</div>

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/](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!

 ![Screenshot 2023-12-27 at 12.40.07](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/2X/7/7d1b681f6330f494cd139993fcd5e39a7a7dc699.jpeg)

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [December 27, 2023, 12:46pm UTC](https://community.elfsight.com/t/how-to-customise-carousel-arrows/35546/5 "2023-12-27T12:46:14Z")

</div>

Got you!

I’ll check with our devs if anything can be done and will get back to you 🙂

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [December 27, 2023, 1:08pm UTC](https://community.elfsight.com/t/how-to-customise-carousel-arrows/35546/6 "2023-12-27T13:08:52Z")

</div>

We’ve added this code to the Custom CSS field on the Appearance tab of your widget’s settings:

```auto
[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:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/2X/c/c42f6905f3bb1caf9438de751725e0c585ea7e02.jpeg)