3D carousel title of underlying image

Hello,

The 3D Carousel does not have a title; it contains a paragraph field that is not restricted to any specific bundle. To add a title and image for each item, we have two options:

Use existing paragraph bundles – Instead of creating a new bundle, install the Layout Paragraphs module, which includes a One Column bundle. Then, add a Carousel and place a One Column bundle inside each slide. Within each One Column bundle, you can insert a Simple Text field and an Image field. with this method you can assign bg color to each one column.

Create a new paragraph bundle – Define a new paragraph type with an Image or Media field and a Plain Text field positioned above the image. This bundle can then be used inside each carousel item.

Best wishes,
Alaa

Hi Alaa,
I have not been clear enough. Each image has an 'Image Title' and this title is shown in the carousel above the image. For the effect see the previously attached image.

Thank you for the clarification! Yes, you can hide the title and only display it when its corresponding slide is active. The carousel applies an active class to the current slide. Below is some CSS that hides the title by default and reveals it when its slide becomes active.

.paragraph--type--3d-carousel-bundle .pb__caro-item .paragraph .pb__content-title {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.paragraph--type--3d-carousel-bundle .pb__caro-item.pb__active .paragraph .pb__content-title {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

Best wishes
Alaa