Website Design & Development
We create stunning, user-friendly websites that drive growth.
Event Marquee Slider — User Guide
Table of Contents
1. Introduction & Key Features #
Event Marquee Slider is a lightweight, high-performance WordPress plugin developed by Altechmind Technologies (OPC) Pvt. Ltd. It lets administrators display events as smooth, auto-scrolling marquees with optional banner images and external links.
Two display modes are supported — a horizontal left-to-right ticker and a vertical bottom-to-top card slider. Both use pure CSS animations with zero frontend JavaScript for optimal Core Web Vitals.
Key Features #
- Unlimited events with title, optional banner image, and external URL
- Horizontal marquee — [event_marquee] shortcode
- Vertical card slider — [event_marquee_vertical] shortcode
- WordPress sidebar widget with full configuration
- Drag-and-drop event reordering
- Active/inactive toggle per event
- Fully customizable colors, speed, sizing, and behavior
- Live admin preview
- Zero frontend JS — pure CSS animations
- Responsive design for all devices
- Complete security hardening (nonce, capability checks, prepared statements, escaping)
- Clean uninstall — removes all data on deletion
- Translation-ready (i18n)
Use Cases #
- Conference & event announcements linking to registration
- Academic call-for-papers with journal banners
- Partner & sponsor showcases
- News ticker with image thumbnails
- Sidebar event widget for journal or institutional websites
- Webinar & workshop promotion banners
2. System Requirements #
| Requirement | Minimum Version |
|---|---|
| WordPress | 5.6 or higher |
| PHP | 7.4 or higher |
| MySQL | 5.7+ (or MariaDB 10.3+) |
| Browser (admin) | Chrome, Firefox, Safari, Edge (latest) |
3. Installation #
Method A — Upload via WordPress Admin #
- Log in to your WordPress admin dashboard.
- Navigate to Plugins → Add New → Upload Plugin.
- Click "Choose File" and select event-marquee-slider.zip.
- Click "Install Now" and wait for upload to complete.
- Click "Activate Plugin".
Method B — Manual FTP/SFTP Upload #
- Extract event-marquee-slider.zip locally.
- Upload the event-marquee-slider/ folder to /wp-content/plugins/.
- Activate from Plugins page in WordPress admin.
Post-Installation Verification #
- "Event Marquee" menu appears in admin sidebar.
- Admin page loads with 3 tabs: Manage Events, Display Settings, Live Preview.
- Database table wp_ems_events created automatically.
Default settings are created on activation. Deactivating and reactivating preserves your existing events and settings.
4. Admin Panel Guide #
Access via Event Marquee in the WordPress sidebar.
Adding an Event #
- Enter Event Title (required, max 500 chars).
- Optionally add an External Link URL (must be http:// or https://).
- Optionally select a Banner Image via WordPress Media Library.
- Click "Add Event".
Editing / Deleting #
Click the pencil icon to edit (form populates, click "Update Event"). Click the trash icon to permanently delete (confirmation dialog shown).
Reordering #
Drag the handle (≡) on each row. Order saves automatically via AJAX.
Toggle Active/Inactive #
Use the toggle switch in the Status column to show/hide events from frontend without deleting.
5. Display Settings #
Configure the horizontal marquee appearance. Applies to [event_marquee] output.
| Setting | Default | Description |
|---|---|---|
| Scroll Speed | 30s | Loop duration. Lower = faster. Range: 5–120s. |
| Direction | Left | Left (←) or Right (→). |
| Pause on Hover | Enabled | Pauses animation on hover. |
| Open in New Tab | Enabled | Links open in new tab. |
| Background Color | #1a1a2e | Container background. |
| Text Color | #ffffff | Title text color. |
| Accent Color | #e94560 | Hover, separators, icons. |
| Font Size | 15px | Title font size. 10–30px. |
| Image Height | 50px | Banner image height. 20–120px. |
| Gap | 60px | Event spacing. 20–150px. |
| Border Radius | 6px | Image corners. 0–25px. |
| Edge Gradient | Enabled | Fade effect at edges. |
Click "Save Settings" before switching to Live Preview to see changes.
6. Shortcode Reference #
Horizontal Marquee #
[event_marquee]
Full-width scrolling ticker. No inline attributes — all config from admin panel.
Vertical Card Slider #
[event_marquee_vertical]
Bottom-to-top card layout. Supports inline attributes for per-instance customization:
| Attribute | Default | Description |
|---|---|---|
| width | 300 | Width in px (150–600) |
| height | 400 | Height in px (200–800) |
| speed | 20 | Seconds per loop (5–120) |
| bg_color | #1a1a2e | Background (hex) |
| text_color | #ffffff | Title color (hex) |
| accent_color | #e94560 | Accent color (hex) |
| pause_hover | 1 | Pause on hover (1/0) |
| open_new_tab | 1 | New tab links (1/0) |
| overlay | 0 | Title on image (1/0) |
| card_gap | 16 | Card gap in px (4–40) |
| font_size | 14 | Font size in px (10–24) |
| border_radius | 10 | Corner radius (0–25) |
Examples #
[event_marquee_vertical width="320" height="500" bg_color="#0a0a1a" accent_color="#ff6b81" overlay="1"]
[event_marquee_vertical width="280" height="380" bg_color="#f8f9fa" text_color="#333" speed="25"]
7. Sidebar Widget #
- Go to Appearance → Widgets.
- Find "Event Marquee — Vertical".
- Drag into your sidebar/widget area.
- Configure settings (title, dimensions, colors, speed).
- Click Save.
Events are managed centrally. The widget and shortcodes share the same data — add events once, display everywhere.
8. Responsive Behavior #
| Breakpoint | Device | Behavior |
|---|---|---|
| < 480px | Mobile | Full-width, 13px font, 35px images, reduced padding |
| 481–768px | Tablet | Max 340px widget, scaled proportionally |
| > 768px | Desktop | Exact configured dimensions |
9. Uninstallation #
Deactivation (Plugins → Deactivate) — preserves all events, settings, and database table.
Deletion (Plugins → Delete) — permanently removes: wp_ems_events table, all plugin options, transient caches, and widget config.
To reinstall later, only deactivate. Deletion permanently erases all event data.
10. Performance #
- Zero frontend JS — pure CSS @keyframes animations
- Inline CSS — no external stylesheet requests
- Transient caching — events cached 1 hour, auto-cleared on changes
- Lazy loading — images use loading="lazy"
- ~50KB total — lightweight plugin footprint
- Admin-scoped — CSS/JS loads only on plugin settings page
