Obsidian Stats logoObsidian Stats

Simple Image Slider

by XIN
5
4
3
2
1
New Plugin
Install Code

Description

This plugin has not been manually reviewed by Obsidian staff. Render Obsidian image embeds as a lightweight slider and show image captions.

Reviews

No reviews yet.

Stats

stars
downloads
0
forks
0
days
NaN
days
NaN
days
0
total PRs
0
open PRs
0
closed PRs
0
merged PRs
0
total issues
0
open issues
0
closed issues
0
commits

Latest Version

Invalid date

Changelog

See all version on GitHub

README file from

Github

Simple Image Slider

Simple Image Slider is a lightweight Obsidian plugin that renders a group of image embeds as a clean swipeable slider with captions. It can also show captions for ordinary image embeds.

It is intentionally small. It supports Obsidian image wikilinks, click navigation, keyboard navigation, swipe/drag navigation, and captions. It does not include thumbnails, fullscreen mode, autoplay, video/audio/PDF support, annotations, compression, compare mode, or a settings panel.

Simple Image Slider example

Features

  • Render multiple Obsidian image embeds as one slider.
  • Swipe or drag horizontally to move between images.
  • Click the counter to open an image list and jump directly to a slide.
  • Use left/right keyboard navigation when the slider has focus.
  • Keep captions below images so they do not cover image content.
  • Hide visual controls by default for a quiet article-style layout.
  • Add visible captions to ordinary captioned images without modifying note content.
  • Insert a starter slider block from the command palette, then bind it to a hotkey if desired.

Usage

Add an image-slider code block to a note:

```image-slider
![[landscape-lake.jpg|Alpine lake at sunrise]]
![[forest-river.jpg|River through evergreen forest]]
![[red-rock-desert.jpg|Red rock desert trail]]
```

Supported slider line forms:

![[image.png]]
![[image.png|caption]]
![[folder/image.png|caption]]
![[folder/image.png | caption]]

The text after | is displayed as a caption under the image. If a slide has no caption, no caption is shown.

You can also run Simple Image Slider: Insert image slider block from the command palette. To make it faster, bind that command in Obsidian's Hotkeys settings.

Ordinary image captions are also supported:

![[image.png|caption]]
![caption](https://raw.githubusercontent.com/xinworks/obsidian-simple-image-slider/HEAD/image.png)

For ordinary images, |300 and |300x200 are treated as Obsidian size aliases, not captions.

Behavior

  • One image is shown at a time.
  • Previous and next controls wrap around at the ends.
  • The counter opens a compact image list for quick slide switching.
  • Horizontal swipe or drag changes slides.
  • The current image is preserved when the same slider block re-renders after editing.
  • Small accidental drag movement is ignored.
  • The image uses object-fit: contain.
  • The image area uses a stable 4:3 canvas and prioritizes filling the available width.
  • Hover effects do not resize, crop, scale, shift, or reflow the image area.
  • Missing or unsupported lines are skipped; valid images still render.
  • If no valid images are found, the block renders No valid images found.
  • Ordinary image captions are added during rendering and do not modify note content.

Install Manually

  1. Build the plugin:
npm install
npm run build
  1. Copy these files into your vault:
<vault>/.obsidian/plugins/simple-image-slider/
  main.js
  manifest.json
  styles.css
  1. Enable Simple Image Slider in Obsidian community plugins.

Development

npm install
npm run verify

npm run verify runs parser/CSS tests and then builds the Obsidian plugin.

Documentation

Demo Image Credits

The README demo uses landscape photos from Unsplash:

License

MIT

Sponsors