🚀 Display posts in a smooth and interactive carousel layout
The Post Carousel Widget in Ansar Elements lets you showcase posts in a sliding carousel format. It is ideal for featured posts, trending content, latest articles, or homepage sections where you want visitors to browse content interactively.
⚡ Quick Start
- Open any page using Elementor Editor
- Drag & drop the Post Carousel Widget
- Select posts using Post Query
- Configure carousel settings
- Style the widget according to your design
🎛️ Content Controls
🧩 Container
Control the overall layout structure:
- Layout width and spacing
- Content positioning
- Container settings
📦 Card Layout
Customize the post card appearance:
- Card style selection
- Layout arrangement
- Item spacing
📄 Card Content
Control content displayed inside each post card:
- Show/Hide content elements
- Excerpt settings
- Content arrangement
🎞 Slider Settings
Control carousel behavior and interaction:
- Slides Per View
- Slides Per Scroll
- Autoplay
- Autoplay Speed
- Transition Speed
- Loop
- Navigation Arrows
- Pagination Dots
- Pause on Hover
🔍 Post Query
Choose which posts to display:
- Categories / Tags
- Order By / Order
- Posts Per Page
- Offset
- Exclude Posts
- Not Found Text
🔘 Button
Customize call-to-action settings:
- Button Text
- Icon
- Position & spacing
🎨 Style Controls
🧱 Container
Customize the outer layout:
- Background
- Padding
- Margin
- Alignment
📦 Card Layout
Style the post card:
- Background
- Border & Radius
- Box Shadow
- Padding
📄 Card Content
Customize content styling:
- Typography
- Colors
- Spacing
🏷 Category Badge
Customize category labels:
- Typography
- Colors
- Background
- Border Radius
🖼 Featured Image
Image styling options:
- Height control
- Border Radius
- Overlay effects
📝 Post Title
Customize title appearance:
- Typography
- Colors
- Hover colors
- Spacing
📊 Post Meta
Customize post metadata:
- Typography
- Icon colors
- Spacing
⬅️ Navigation
Customize navigation arrows:
- Arrow Size
- Colors
- Background
- Border Radius
- Hover Effects
- Spacing
🔢 Pagination
Customize pagination controls:
- Alignment
- Colors
- Active State Colors
- Size
- Spacing
💡 Pro Tip
Use Autoplay + Loop with navigation arrows enabled to create a smooth content browsing experience and increase visitor engagement.