Search code examples
htmlcssangularcarouselprimeng

Angular Primeng carousel - Custom Prev and Next button

I have explained everything in the attached image. and all CSS code are in the stackblitz.

Basically I want a customized Next and Prev button. I want the border of the Next and Prev button to be same as the inside boxes. and with rounded corner. (that means to show that there is a Prev or Next box still available so use can click on Next/Prev

The problem I am getting now is when I click on the Next/Prev, the border is getting bold and blue. I believe it is coming from the default browser(not sure though)

https://stackblitz.com/edit/primeng-carousel-demo-i1lnft

   .p-carousel-prev-icon,
.pi {
  display: none !important;
}

.pi {
  display: none !important;
}

.pi-chevron-left:before {
  content: '' !important;
}

::ng-deep .p-carousel .p-carousel-content .p-carousel-next::after {
  width: 0.513rem;
  height: 1.25rem;
  font-size: 0.875rem;
  font-family: Roboto;
  transform: scale(2, 4);
}

::ng-deep .p-carousel .p-carousel-content .p-carousel-prev {
  width: 2.513rem;
  height: 5.68rem;
  border-radius: 25%;
  border-right-color: #99bbff;
  border-right-style: solid;
  border-right-width: thick;
  border-top-color: #99bbff;
  border-top-style: solid;
  border-top-width: thick;
  border-bottom-color: #99bbff;
  border-bottom-style: solid;
  border-bottom-width: thick;
  margin: 0 0 0 -5px;
}

::ng-deep .p-carousel .p-carousel-content .p-carousel-next {
  width: 2.513rem;
  height: 5.68rem;
  border-radius: 25%;
  border-left-color: #99bbff;
  border-top-color: #99bbff;
  border-bottom-color: #99bbff;

  border-left-style: solid;
  border-top-style: solid;
  border-bottom-style: solid;
  border-left-width: thin;
  border-top-width: thin;
  border-bottom-width: thin;

  margin: 0 -5px 0 0;
  outline: none !important;
}

.p-carousel-next:focus {
  border-left-style: solid !important;
  border-top-style: solid !important;
  border-bottom-style: solid !important;
  border-left-width: thin !important;
  border-top-width: thin !important;
  border-bottom-width: thin !important;
  outline: none !important;
}

::ng-deep .p-carousel .p-carousel-content .p-carousel-next:focus {
  border-left-style: solid !important;
  border-top-style: solid !important;
  border-bottom-style: solid !important;
  border-left-width: thin !important;
  border-top-width: thin !important;
  border-bottom-width: thin !important;
  outline: none !important;
}

::ng-deep .p-carousel .p-carousel-content .p-carousel-next:hover {
  border-left-style: solid !important;
  border-top-style: solid !important;
  border-bottom-style: solid !important;
  border-left-width: thin !important;
  border-top-width: thin !important;
  border-bottom-width: thin !important;
  outline: none !important;
}

::ng-deep .p-carousel .p-carousel-content .p-carousel-next:enabled {
  border-left-style: solid !important;
  border-top-style: solid !important;
  border-bottom-style: solid !important;
  border-left-width: thin !important;
  border-top-width: thin !important;
  border-bottom-width: thin !important;
  outline: none !important;
}

::ng-deep .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
  border-left-style: solid !important;
  border-top-style: solid !important;
  border-bottom-style: solid !important;
  border-left-width: thin !important;
  border-top-width: thin !important;
  border-bottom-width: thin !important;
  outline: none !important;
}

::ng-deep .p-carousel .p-carousel-content .p-carousel-next:active {
  border-left-style: solid !important;
  border-top-style: solid !important;
  border-bottom-style: solid !important;
  border-left-width: thin !important;
  border-top-width: thin !important;
  border-bottom-width: thin !important;
  outline: none !important;
}

::ng-deep .p-carousel .p-carousel-content .p-carousel-prev::after {
  width: 0.513rem;
  height: 1.25rem;
  font-size: 0.875rem;
  font-family: Roboto;
  transform: scale(2, 4);
}

::ng-deep .p-disabled {
  /* visibility: hidden !important; */
  border-left-color: white !important;
  border-right-color: white !important;
  border-top-color: white !important;
  border-bottom-color: white !important;
}

enter image description here

Solution

  • do you want to keep the blue border ? because this is enough to edit your buttons :

    .p-carousel-next, .p-carousel-prev {
  box-shadow: none !important;
  border-width: 1px !important;

  /* if you wish to remove the border or change its color */
  /* border: transparent !important; */
}