Porto Carousel Element

The Porto Carousel Element in the Porto Post Type Builder allows you to display posts or custom content in a responsive carousel with customizable navigation, animations, and device-specific controls.

1. Open the Post Type Builder.
2. Click the “+” Add Block icon in the top-left corner.
3. Search for “Porto Carousel” in the block list and Click it.
4. Insert Content Inside the Carousel - Add elements (e.g., image boxes, post blocks, custom HTML) as children of the carousel. Each child element becomes one carousel item.
5. Configure Carousel Options - Adjust general layout settings, navigation, autoplay, and responsive behavior from the element’s settings panel.
6. Save & Preview - Confirm how the carousel behaves across devices.

1. General Display Controls

   • Stage Padding – Adds padding on the left/right of the carousel track.
   • Item Margin – Spacing between carousel items.
   • Items – Default number of visible items.
   • Items on Desktop / Tablet / Mobile / Mini – Device-specific item counts for full responsiveness.
   • Full Screen – Expands carousel to full screen.
   • Center Item – Centers the active slide.
   • Infinite Loop – Loops slides continuously.

2. Autoplay Controls

   (Displayed only when Autoplay is enabled)

   • Autoplay Toggle – Enables automatic sliding.
   • Autoplay Timeout – Time between slides (ms).
   • Pause on Mouse Hover – Stops sliding when the user hovers over the carousel.

3. Navigation Controls

   (Displayed only when Show Nav is enabled)

   • Show Nav – Displays next/previous arrows.
   • Nav Position – Choose where arrows appear.
   • Nav Inside? – Place arrows inside the carousel area.
   • Nav Type – Choose arrow style/icon set.
   • Show Nav on Hover – Only show arrows when hovering.

4. Dot Navigation Controls

   (Displayed only when Show Dots is enabled)

   • Dots Position – Set the location of the dots.
   • Dots Style Options – Customize dot appearance.

5. Animation & Effects

   • Item Animation In – Animation when an item enters view.
   • Item Animation Out – Animation when leaving view.
   • Animation Delay – Delay before animation starts.
   • Animation Duration – Duration of item animations.

6. Performance & Media

   • Fetch Video – Enables video content inside carousel items.
   • Lazyload – Loads items only when needed (faster page loading).
   • Merge Items – Merges variable-width items into the slide flow.

7. Styling

   • Additional CSS Classes – Add custom classes for advanced styling.

• Use Lazyload when working with many images.
• Set device-dependent item counts for better mobile experience.
• Enable Show Nav on Hover for cleaner, less cluttered layouts.
• Use Center Item when displaying cards or product highlights.