Story Slider Feed Component

A responsive Vue.js carousel component that displays news stories from RSS feeds.

Overview

Fetches and displays news content from XML RSS feeds in a touch-enabled carousel using Flickity 2.2.2.

Responsive Layout:

• Mobile: Shows 1 story at a time, 1 Flickity instance
• Medium: Shows 3 stories at once with side previews, 1 Flickity instance
• Large: Shows 3 stories at once, 2 Flickity instances

Technical Stack

• Vue.js
• Flickity 2.2.2
• Vite
• SCSS

Image Specifications

Square (1:1 aspect ratio) images:

• Small viewport: 350×350 pixels
• Medium/Large viewports: 640×640 pixels

Configuration

Configure the component using data attributes on the mounting element:

<div
  id="tcu-storyslider-feed"
  data-source="path/to/feed.xml"
  data-limit="5"
  data-category=""
  data-shuffled="false"
  data-description="false"
></div>

Available Options:

• data-source: Path to RSS feed XML (required)
• data-limit: Number of stories to display (default: 5)
• data-category: Filter stories by category (default: empty)
• data-shuffled: Randomize story order (default: “false”)
• data-description: Show story descriptions on large viewports (default: “false”)