Service Portal Carousel Widget CSS

Wesley Breshear
Tera Expert

‎08-29-2022 10:16 PM

Hello,

Does anyone know how to remove or the CSS commands in removing the gray shadows and white arrows at each end of the out-of-the-box Carousel Widget?  And the little white circles?  I want the widget as an image carousel without all the shadowing, arrows, and circles.

Thank you,

-Wesley

Labels:
0 Helpfuls
  • 1,101 Views
2 REPLIES 2

Tom Sienkiewicz
Mega Sage

‎08-30-2022 01:20 AM

Hi, seeing as it uses the UI Bootstrap carousel template, perhaps you can find some more useful docs on this component:

https://angular-ui.github.io/bootstrap/versioned-docs/1.1.2/#/carousel

I guess you could add CSS which will override/hide certain classes used by that component to your widget instance. Have not tried it myself though.

Daniel Arnold
Tera Guru

‎05-03-2023 09:57 AM

So I just solved the issue of how to remove the white arrows on either side and eliminate grey space by adding the following CSS code to the carousel widget:

 

.carousel-control.right,

.carousel-control.left {

   background: transparent!important;

   display: none;

}

 

Make sure you have that "display: none" part to remove the arrows.

 

Hope this helps someone!

 

-Danny