Home:ALL Converter>Angular Primeng carousel - Custom Prev and Next button

Angular Primeng carousel - Custom Prev and Next button

Ask Time:2021-02-11T03:33:26         Author:SK.

Json Formatter

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

Author:SK.,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/66143799/angular-primeng-carousel-custom-prev-and-next-button
Yannick Beauchamp-H :

There's a box-shadow that is added when the button is focused.\nYou can remove it with this style:\n::ng-deep .p-carousel .p-carousel-content .p-carousel-prev:focus {\n box-shadow: none;\n}\n\nAlso, I think this is what you mentioned in the image, but the previous button have border width set to thick, it should be changed to thin to match the next button:\n::ng-deep .p-carousel .p-carousel-content .p-carousel-prev {\n width: 2.513rem;\n height: 5.68rem;\n border-radius: 25%;\n border-right-color: #99bbff;\n border-right-style: solid;\n border-right-width: thin;\n border-top-color: #99bbff;\n border-top-style: solid;\n border-top-width: thin;\n border-bottom-color: #99bbff;\n border-bottom-style: solid;\n border-bottom-width: thin;\n margin: 0 0 0 -5px;\n}\n\nHere's the updated demo: https://stackblitz.com/edit/primeng-carousel-demo-dbzinn",
2021-02-10T21:16:03
yy