What is the Slider Block?
The Slider block is a responsive carousel built into Zelligram, the site builder for non-profit organizations. It lets you display a horizontal, scrollable collection of slides — each slide can hold any content: text, images, buttons, testimonials, and more.
It’s a great fit for showcasing testimonials from beneficiaries, partner logos, program highlights, photo galleries, or any content you want to surface in a compact, visual way.
How to Add a Slider
Step 1 — Insert the Slider block
Click the + button to add a new block and search for “Slider”. Select it from the results to insert it into your page.
Step 2 — Add Slide blocks inside
The Slider is a container — you fill it by adding Slide blocks inside it. Click the + button inside the slider area and search for “Slide”. Add one Slide for each item you want to display.
Step 3 — Build your slide content
Inside each Slide you can add any standard blocks — paragraphs, headings, images, buttons, and more. Each slide acts as an independent content area you can design freely.
Step 4 — Adjust settings and publish
Select the Slider block (not a Slide) and use the Settings panel on the right to configure layout, behavior, and navigation. Then save or publish your page to see the carousel in action.
Layout Settings
Found in the Settings tab → Layout panel when the Slider block is selected.
- Columns — How many slides are visible at one time (1–6). Default is 3.
- Min Column Width (px) — The minimum width of each slide. On smaller screens, fewer slides will fit, and the slider adapts automatically. Default is 300px.
- Spacing (px) — The gap between slides. Default is 20px.
Behavior Settings
Found in the Settings tab → Behavior panel.
- Loop — When enabled, the slider wraps back to the first slide after the last one. On by default.
- Autoplay — Automatically advances to the next slide on a timer. When enabled, two extra options appear:
- Interval — How many seconds between each advance (3–8 seconds).
- Pause on Hover — Pauses autoplay when the visitor’s mouse is over the slider.
- Continuous Autoplay — Creates a smooth, non-stop marquee-style scroll with no pauses between slides. When enabled, an extra Scroll Speed option (1–5) controls how fast it moves. Note: Continuous Autoplay and Autoplay are mutually exclusive — enabling one turns off the other.
Navigation Settings
Found in the Styles tab → Navigation panel.
- Show Arrows — Displays previous/next arrow buttons. When enabled, you can also set the Arrow Position to Inside (overlapping the slider) or Outside (flanking it).
- Show Dots — Displays dot indicators below the slider, one per slide. Visitors can click a dot to jump to that slide.
Color Settings
Found in the Styles tab → Color panel (only when the relevant navigation is enabled).
- Arrow color — The color of the arrow icons.
- Arrow background — The background color of the arrow buttons.
- Dots color — The color of the dot indicators.
Styling Individual Slides
Click on a Slide block (not the outer Slider) to access per-slide styling options in the Settings panel. Each slide supports:
- Background and text color
- Padding (all sides)
- Font size and line height
- Border (width, style, color, radius)
- Box shadow
Ready-Made Patterns
The Slider block comes with pre-built patterns you can insert as a starting point instead of building from scratch. Look for these in the block pattern library:
- Hero Slider — A full-width banner-style slider ideal for homepage heroes.
- Image Gallery Slider — A clean photo gallery carousel.
- Testimonial Slider — A multi-card layout for quotes and testimonials.
- Left Image Testimonial Slider — A testimonial layout with an image on the left side of each card.
Tips & Best Practices
- Use Continuous Autoplay for logo strips. If you’re displaying partner or sponsor logos, Continuous Autoplay creates a polished, ticker-style effect.
- Keep slide content concise. Sliders work best with short, focused content per slide — a quote, an image with a caption, or a single stat.
- Set columns to 1 for full-width hero slides. A single visible column combined with Loop and Arrows gives a classic full-screen slideshow effect.
- Responsive by design. The slider automatically adjusts how many slides are visible based on the Min Column Width and the visitor’s screen size — no extra configuration needed.
- Avoid Autoplay for accessibility. Auto-advancing content can be disorienting for some users. If you do use Autoplay, always enable Pause on Hover and keep the interval at 5 seconds or more.