Angular PrimeNg carousel with personalized previous and next buttons

The information is provided in the image attached, with all CSS code available on stackblitz.

I am looking to customize the Next and Prev buttons by having their borders match the inside boxes and be rounded. This will indicate to the user that there is a Next or Prev option available for clicking.

Currently, the issue I'm facing is that when clicking on the Next/Prev buttons, the border becomes bold and blue. This behavior may be due to the default browser settings (not certain).

Link to Stackblitz

   /* CSS Code */
.pi,
.p-carousel-prev-icon {
  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);
}
/* More CSS Code... */

https://i.sstatic.net/AJ0BV.png

htmlcssangularcarouselprimeng

Answer №1

When focusing on the button, a box-shadow is applied.

To remove it, use the following style:

::ng-deep .p-carousel .p-carousel-content .p-carousel-prev:focus {
  box-shadow: none;
}

Additionally, it appears that the previous button in the image has a thick border width which should be changed to thin to match the next button:

::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: thin;
  border-top-color: #99bbff;
  border-top-style: solid;
  border-top-width: thin;
  border-bottom-color: #99bbff;
  border-bottom-style: solid;
  border-bottom-width: thin;
  margin: 0 0 0 -5px;
}

For an updated demo, check out: https://stackblitz.com/edit/primeng-carousel-demo-dbzinn

Answer №2

Are you interested in retaining the blue border? The following code snippet can help you customize your buttons:

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

  /* To remove the border or modify its color, uncomment this line */
  /* border: transparent !important; */
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Hide the <footer> element unless there is extra space

I am trying to create a footer that only appears when the viewer has scrolled to the bottom of the page. This means that if you haven't reached the bottom yet, the footer is not visible. The concept seems simple enough, but as I am still in the learni ...

htmlcssfooter

Comparing transition effects: scale, transform, and all

My goal is to apply transition effects to specific transform functions in CSS, such as scale(), while excluding others like translate(). Initially, I attempted the following code snippet: input:focus + label, input:not(:placeholder-shown) + label { tran ...

csscss-transitionscss-transforms

Emphasize the search query in Angular 2

I'm a newcomer to Angular 2 and I'm attempting to accomplish a task similar to the one mentioned in the following post: Highlight the search text - angular 2. I have created a pipe filter and my question is, where should I place the pipe filter a ...

htmlangulartypescriptpipe

How to center align a fixed div position

I am looking for a way to center align a fixed position div on my page. In the past, I have been able to achieve this with absolutely positioned divs using a specific technique. left: 50%; width: 400px; margin-left: -200px; However, this method does no ...

htmlcssalignmentcss-positioncenter

How can I reduce the size of a Bootstrap 5 carousel that spans the entire screen?

As someone new to web development, I have found using bootstrap to be extremely helpful. However, I am currently struggling with creating a carousel for my website. My goal is to display some pictures in one corner of the page, but the carousel keeps str ...

htmlcssbootstrap-5

When an HTML string contains <br/>, the line break is not displayed

I am attempting to insert a line break between Can get report and Can order in a table cell as shown below: Can get report Can order This is the code in my csHTML file: <tbody> <tr> @{ string role = string.Empty; if (p.Can ...

c#htmlasp.netasp.net-mvc

"Utilizing Twitter Bootstrap to create full-width input fields with pre

Presently utilizing bootstrap-2.1.1 In my row-fluid, I have 2 columns with input-prepends inside. Below is a snippet of code: <div class="row-fluid"> <div class="span6"> <ul> <li> <div class="input ...

csstwitter-bootstrap

What is the best way to incorporate a sliding div into these CSS Message Bubbles?

Just dipping my toes into web development, so please bear with me. I am working on a prototype of a Messaging Application and have most of the basics sorted out. Now, I am adding some finishing touches to enhance user experience. My goal is to make it so t ...

htmlcss

Using jQuery to add a class to an input option if its value exists in an array

Looking for a way to dynamically add a class to select option values by comparing them with an array received from an ajax call. HTML <select id="my_id"> <option value="1">1</option> <option value="2">2</option> ...

javascriptjqueryhtmlajax

Tips for resizing all HTML elements when adjusting browser window dimensions

I am working with the following HTML code snippet: <div id="sectionOne" class="container-fluid d-flex flex-column justify-content-center align-items-center" style="height: 80vh;"> <div class="row d-flex justify-content-center" style="color: #00 ...

htmlcssbootstrap-4

"Aligning two images side by side in a horizontal

[enter image description here][1]I am trying to place two images on my website, but I am struggling to vertically align them properly. I have attempted using line-height and vertical alignment, however, I cannot seem to pinpoint the issue or identify any m ...

htmlcss

Unable to assign a basic HTML class to a Blazor component

Upon attempting to implement the following code in my .NET 5 Blazor project within a .razor file: <SignedLabel class="some-css-class" Price=123 Currency=Currency.Usd /> I encountered an issue where Blazor interpreted the class attribute as ...

htmlrazorblazor

Confirm the existence of duplicates within an Angular reactive form

I am working with a reactive form that looks like this: https://stackblitz.com/edit/angular-form-array-example After clicking the "add credentials" button 3 times, I have 3 sets of elements for username and password. In the first row, I enter the usernam ...

angular

Tips for creating a multi-line text field with ellipsis using a div in CSS

Similar Question: How to Insert Ellipsis in HTML Tag for Content that is Too Wide Using CSS to Display “…” on Overflowing Multiline Blocks Hello, I am attempting to create a div tag to present a question. The size of this div bo ...

csshtmltextellipsis

What is the best way to allow text input in a table cell to exceed the confines of the table when it is clicked on

I am currently working on a table that has three columns: a label, a dropdown selector, and an input field. The challenge I'm facing is that the input field needs to accommodate multiple lines of content, specifically in JSON format. However, I want ...

htmlcsstwitter-bootstrap

Is there a way to log and process div data posted using jQuery in CSS format?

I am looking to extract and log a JavaScript-calculated result from an anonymous survey created using a WordPress plugin. The generated HTML code is: <div ref="fieldname57_1" class="cff-summary-item"> <span class="summary-field-title cff-summary ...

jquerycss

tips for moving a button 2 pixels up or down in position

How can I adjust the position of my button by a specific number of pixels up or down from where it currently is? Can you provide guidance on how to find the current location? Thank you in advance. ...

css

Animate the leftward disappearance of a div to make it vanish

My goal is to create a user interface where users can navigate through different divs. Here is the HTML code: <article id="realize" class="realizeBox"> <div class="shown"> <div class="heading"> <h2>Realisati ...

javascriptjqueryhtmlcssjquery-animate

Tips on implementing jQuery in a JavaScript file referenced in angular.json

Currently, I am utilizing a JavaScript file that incorporates jQuery within it. In order to employ this JavaScript file, I have included it in the scripts array within the angular.json file. Additionally, I have also included jQuery in the same array befor ...

javascriptjqueryangularangular8

Angular 4 Operator for adding elements to the front of an array and returning the updated array

I am searching for a solution in TypeScript that adds an element to the beginning of an array and returns the updated array. I am working with Angular and Redux, trying to write a reducer function that requires this specific functionality. Using unshift ...

javascriptarraysangulartypescript