question Re: Help Remove the Pause/Play button on the Carousel Widget in Portal in Community Central forum

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

vickysharland — Fri, 06 Sep 2024 17:34:01 GMT

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.

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

Community Alums — Sun, 08 Sep 2024 07:01:39 GMT

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.

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

vickysharland — Mon, 09 Sep 2024 12:16:51 GMT

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.

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

vickysharland — Tue, 10 Sep 2024 10:59:38 GMT

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;

}