Help Remove the Pause/Play button on the Carousel Widget in Portal

[vickysharland]

Can anyone help me with how to remove (hide) the play/pause button on the carousel widget?
The button showed up after upgrading to Xanadu and I cannot seem to find a solution on what it is called or how to get rid of it.

[Community Alums]

Hi @vickysharland ,

Seems like it's a custom widget which you are using in the header.

are you using Employee center ? if yes, then try to repair the Employee center plugin.

if no, then open the content or widget and try to fix it from there.

[vickysharland]

It is a cloned version of the original. They only addition from OOB is that I added CSS to remove the left/right arrows. I do not see a way to get rid of (hide) the play/pause button. If there was a way to keep the arrows, without the huge white circle behind them and to get rid of the play/pause that would be perfect.

[vickysharland · Accepted solution]

This was the solution that we went with:

.carousel-indicators li { visibility: hidden;}

.pull-in{

.carousel-inner > .item > .container {width: 100%}

}

.fa-pause {

  background: transparent!important;

display: none;

}

.glyphicon {

  background: transparent!important;

}

.carousel-control {

    opacity: .5;

  font-size: 2rem;

  color: #fff;

  text-align: center;

  text-shadow: 0 .1rem .2rem rgba(0, 0, 0, .6);

  background-color: transparent;

}

.carousel-control:hover, .carousel-control:focus {

color: #fff;

text-decoration: none;

opacity: .9;

}

.right.carousel-control {

  margin-right: 1.5rem;

  //background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);

}

.left.carousel-control {

margin-left: 1.5rem; 

//background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);

}

.carousel-indicators {

bottom: 1rem; 

}

.carousel-indicators button:not(.active) {

  background-color: transparent;

  box-shadow: 0 0 1rem #fff;

  border: 1px solid #fff;

}