Get Started

Vertical Animated Ticker 2.1 is a modern Joomla module that shows news, announcements, or curated headlines in a clean vertical ticker. It uses vanilla CSS and JavaScript (prefix jx-vt) — no jQuery.

What can it do?

• Pull items from Joomla articles or a custom items subform
• Two motion modes: Step (pause between rows) or Continuous scroll
• Five ready themes: Modern, Minimal, Dark, Soft, Contrast
• Header label, play / prev / next controls, touch swipe, and keyboard support
• Optional intro images (square, round, or wide), category, author, and date

Who is this for?

• News and magazine sites
• Corporate announcement strips
• Schools, clubs, and community portals
• Any site that needs a readable vertical headline feed

Works with

• Joomla 4, 5, and 6
• Phones, tablets, and desktops
• Multiple module instances on the same page

Tip: Start with the Modern theme, turn on the header label, and enable intro images for the strongest first impression.

Downloading the Extension

Email: After purchasing from our store, you will receive an email with the download link.

Store: You can also download it from the Downloads section. Create an account with the same email used at purchase if you are new.

Package: VerticalAnimatedTicker_UNZIP.zip

Unzip the Package

• Unzip VerticalAnimatedTicker_UNZIP.zip.
• Inside you will find:
  • mod_vertical_ticker_2.1.zip — install this for Joomla 4, 5 & 6
  • ReadMe.txt — notes for the current version

Install in Joomla

1. Log in to the Joomla administrator.
2. Go to System → Install → Extensions.
3. Open the Upload Package File tab.
4. Choose mod_vertical_ticker_2.1.zip.
5. Click Upload & Install.
6. Wait for the green success message.

Create and publish a module

1. Go to Content → Site Modules (or Extensions → Modules).
2. Click New and select Vertical Animated Ticker.
3. Set a title, choose a module position, and set Status to Published.
4. Assign the module to the menu items where it should appear.
5. Save.

Requirements: Joomla 4.x / 5.x / 6.x and PHP 8.0+.

Open your Vertical Animated Ticker module and use the tabs below. Every option is managed from the backend.

Content

• Content Source — Joomla Articles or Custom Items.
• Categories — which article categories to load (articles source).
• Number of Articles — how many rows to fetch.
• Order By / Direction — publish, created, modified, ordering, hits, or random.
• Featured Articles — show, hide, or featured only.
• Custom Items — repeatable rows with title, text, link, date, category, author, and image.

Display

• Show Header Label — optional badge text such as “Latest” or “Breaking”.
• Show Title / Intro / Date / Category / Author / Image / Read More — turn each piece on or off.
• Date Field & Format — publish, created, or modified; use a Joomla date key (for example DATE_FORMAT_LC3) or a PHP pattern like d M Y.
• Image Size & Shape — size in pixels; square, round, or wide.
• Link Target — same window or new window.
• nofollow — optional rel="nofollow" on links.
• Empty State Message — text shown when no items are found.

Motion

• Motion Mode — Step (pause between items) or Continuous Scroll.
• Direction — up or down.
• Visible Items — how many rows show in the viewport.
• Fixed Item Height — set in px, or 0 for auto height.
• Step Animation / Pause Between Steps — timing for step mode.
• Scroll Speed — pixels per second for continuous scroll.
• Pause on Hover / Focus — stops motion while the visitor reads.
• Show Controls — play / pause, previous, and next buttons.
• Controls Position — header bar, footer bar, or overlay.
• Touch Swipe and Keyboard Controls — Space toggles pause; arrow keys move items.

Look & Feel

• Theme — Modern, Minimal, Dark, Soft, or Contrast.
• Accent, Background, Border, Title Color, Body Text Color — fine-tune colours.
• Max Width and Corner Radius — layout polish.

Advanced

• Module Class Suffix — extra CSS class on the module.
• Extra CSS — custom rules scoped to your needs.

Quick start with articles

1. Set Content Source to Joomla Articles.
2. Select one or more categories that have published articles.
3. Turn on Show Intro Image if your articles have intro images.
4. Choose theme Modern, enable the header label, and publish the module.

Quick start with custom items

1. Set Content Source to Custom Items.
2. Click Add in the Custom Items subform.
3. Enter a title, short text, optional link, date, and image for each row.
4. Save and check the frontend.

Visitor controls

• Play / Pause — lock or resume autoplay.
• Prev / Next — move one item (step mode) or nudge the scroll.
• Swipe — flick up/down on touch devices.
• Keyboard — focus the ticker, then use Space and arrow keys.

Note: Article links use Joomla SEF routing. For best URLs, keep a published menu item that points at the article category (even a hidden menu item works).

• Vanilla CSS/JS with jx-vt prefix — no jQuery
• Articles or custom subform items
• Step and continuous scroll modes (up / down)
• Five themes with colour and radius controls
• Header / breaking label
• Play, previous, and next controls (header, footer, or overlay)
• Pause on hover and focus
• Touch swipe and keyboard support
• Intro images with size and shape options
• Date field + format, category, and author meta
• Read more, link target, and nofollow options
• Reduced-motion friendly behaviour
• Joomla 4, 5, and 6 ready (services + Dispatcher architecture)

Q: What is the difference between Step and Continuous Scroll?
A: Step pauses between each item. Continuous Scroll moves smoothly without stopping (until pause on hover or the play button).

Q: Can I use my own headlines instead of articles?
A: Yes. Set Content Source to Custom Items and add rows in the subform.

Q: Why do my article links look like /?view=article&id=…?
A: Joomla needs a menu Itemid for SEF. Create a (hidden) menu item for that category blog, or open any article from that category via a menu so routing can resolve.

Q: How do I show images?
A: Enable Show Intro Image. For articles, set an intro image on each article. For custom items, pick an image in the subform. Then choose size and shape.

Q: Does it work on mobile?
A: Yes. Swipe is on by default, and the layout stacks cleanly on small screens.

Q: Can I add my own CSS?
A: Yes — use Extra CSS in Advanced, or a Module Class Suffix with your template stylesheet.

The ticker does not appear

• Confirm the module is Published and assigned to a visible position.
• Check menu assignment for the page you are viewing.
• Clear Joomla cache (System → Clear Cache).

No items found

• Articles: verify the category has published articles and the count is greater than zero.
• Custom: add at least one subform row with a title or text.

Images do not show

• Enable Show Intro Image.
• Articles need an intro image set in the article Images tab.
• Confirm the image path is valid on the server.

Controls do nothing / motion feels stuck

• If Visible Items is greater than or equal to the item count, step mode has nothing to rotate — lower Visible Items or add more articles.
• Check that Play is not locked in the paused state.
• Hard-refresh the browser so the latest vertical-ticker.js loads.

Still stuck?

Contact support.joomlax.com with your Joomla version and a screenshot of the module settings.