CODEWITHSUNDEEP
angularcarouselprimeng
SK.
SK.

Reputation: 1510

Angular primeng carousel - custom display

I have been assigned to display the carousel in a custom way. Not sure if that can be possible. Any help please...

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

In the existing code the screen looks like below (one or two or three images based on screen size). enter image description here

But the requirement is to display one image in the center and others (i.e. left and right) 30% like below enter image description here

Upvotes: 2

Views: 4269

Answers (1)

Quentin Grisel
Quentin Grisel

Reputation: 4987

I don't have any package to give you sorry. But I produced something that looks like what you need.

Here is the Stackblitz and here is the css code I added to get this view :

.p-carousel-container {
  width: 70% !important;
  margin: auto;
}

.p-carousel-items-content {
  overflow: visible !important;
  width: 70% !important; /* adapt this to show more/less of the sided items, but it should be the same % than for the p-carousel-container above */
}

.p-carousel-prev {
  z-index: 9999;
}

/* https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp */

/* Hide scrollbar for Chrome, Safari and Opera */
.p-carousel-content::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.p-carousel-content {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

I hope it suits your needs. I didn't manage to limit these modifications for small screens only, i'll let you handle that. To test you can just shorten the stackblitz integrated browser.

Upvotes: 1

Related Questions