Angular primeng 轮播 - 自定义显示

Question

我被分配以自定义方式显示轮播。不确定这是否可能。任何帮助请...

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

在现有代码中，屏幕如下所示（一张或两张或三张图片取决于屏幕大小）。

但要求是在中心显示一张图片，其他图片（即左和右）显示 30%，如下所示

Answer 1

我没有任何包裹给你抱歉。但是我制作了一些看起来像你需要的东西。

这是 the Stackblitz，这是我为获得此视图而添加的 css 代码：

.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 */
}

希望能满足您的需求。我没有设法将这些修改仅限于小屏幕，我会让你处理。要进行测试，您可以缩短 stackblitz 集成浏览器。

Angular primeng 轮播 - 自定义显示

Angular primeng carousel - custom display

carousel

primeng

angular