Blog Post Slider
File:
sections/blog-post-slider.liquid
Description
Blog Post Slider
Displays a series of blog articles in a slider format, with each slide showing a blog post’s title, excerpt, author, and a right-aligned image for large screens. Auto-slides every 5 seconds with manual dot navigation.
Features:
- Dynamically loads blog articles from a selected blog
- Right-aligned image with left-aligned content per slide
- Clickable pagination dots for manual navigation
- Auto-adjusts container height based on tallest slide
- Auto-cycles through slides every 5 seconds
Settings:
- title (text) — Heading text displayed above the slider, default “Blog posts”
- post_limit (range) — Number of posts to display (3-12), default 3
- blog (blog) — Blog source for posts
- category_label (text) — Label shown above each post title, default “Writings”
- read_button_text (text) — Text for the read button, default “Read”
- all_posts_button_text (text) — Text for the all posts button, default “All Posts”
- all_posts_url (url) — URL for the all posts button
Blocks: None
Snippets Used: None
Dependencies:
- Tailwind CSS (application.css) for layout and styling
- Inline <script> for slider functionality
Tailwind Status: Full
Settings
| ID | Type | Label | Default | Info |
|---|---|---|---|---|
title | text | Heading | Blog posts | |
post_limit | range | Posts | 3 | |
blog | blog | Blog | ||
| “ | header | |||
category_label | text | Category label | Writings | |
read_button_text | text | Read button text | Read | |
all_posts_button_text | text | All posts button text | All Posts | |
all_posts_url | url | All posts URL |
Presets
- Blog Post Slider (Category: Blog)
Usage
This section can be added via the Shopify theme editor.
{% section 'blog-post-slider' %}