Our native carousel is quick and easy to use, but the arrows that come with it can be hard to see against some backgrounds. This article teaches you two methods to change the arrows.

Option 1: Add code to reduce opacity and add a background

Add an embed element anywhere on your page that has the carousel. Paste in this code:

.bc-carousel-btn {
opacity: 1 !important;
background-color: #000000;
border-radius: 50%;

Somethings to know about the code:

  • Opacity 1 is a 100% opacity. If you want a lower value then change the value to .8 or .5, whatever you want.

  • Background-color is optional. Delete it if you don't want it, or change the hex value if you want a different color than black behind the white arrow image.

  • Border-radius rounds the corner of the background color. Can be in px or %. Delete if you don't need it.

Once the code is in the embed, uncheck iFrame, save changes, and set the height of the embed element to 0px to hide it.

Option 2: "Replace" the existing arrows with your own image

You need to place a container on your page where you'd like the carousel to go. Once you do that, place a gallery element inside of that container and add the images you'd like in your gallery from your media library.

Open up your background image panel, and switch the gallery from grid mode to carousel mode and set the height of the container to what you'd like it to be.

Step 2: Add your arrows

Once you've set up your gallery, place 2 image elements inside the same container that the gallery element is in.

Place your new arrow images in those image elements. Optional: rename those image elements in your page structure panel to make it easier to know what's what.

Step 3: Position your arrows

Now that you've added in your arrows, select the left arrow and left align it. Open up the position panel and select Fix to Parent. Drop it 50% from the top and adjust the left position until it fits on top of the white arrow. In this case I needed to move it 14px. Open up the Transform panel and type in -50% in the Translate Y section to finish centering the arrow.

Do the same steps on the right. Select the right arrow and right align it. Open the position panel and click on the white circle in the upper right hand corner to fix the arrow to the right side (when you Fix to Parent, positioning defaults to upper left corner). Adjust top and right position and Translate Y as shown. The right positioning might be slightly different than the left was.

And now you have your new arrows!

One thing to note, that since the new arrows are covering the native arrows, you are unable to click directly on top of the arrows. You can click around the image container and the carousel will still work. If you would like the arrows to be clickable, not just the area around them, follow this next step:

Step 4: Change the z order (optional)

Select both image elements, open up the Position Panel, and set the z order to 0 so that the white native arrows sit on top.

You'll notice that the white arrow now sits on top of the color arrow. While not the most attractive, it is functional now. You can always have the new arrow images be white or a light grey in order to not have this overlap be visible.

Did this answer your question?