Angular primeng carousel - custom display

user_1338585 0
Viewed 1396

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

carousel primeng angular
1 Answers

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.

user_98685490
Related