simple-slideshow-hugo

Images: 1 2 3 4 5 6
Theme: simple-hugo

Pros:

• Clean, efficient code
• Not using any JS framework, library and other bloat
• Lazy loading
• Easy set-up

Cons:

• Basic design
• Not much configuration (unless you won’t touch code, but you should)
• One per page since I didn’t use any uid’s for classes and js

Usage

1. Clone into themes:

cd my-fun-site
git clone https://github.com/D00NIK/simple-slideshow-hugo themes/simple-slideshow-hugo

2. Add to theme in hugo.toml (or other extension):

theme = ['your-cool-theme', 'simple-slideshow-hugo']

3. Use as shortcode in content:

{{< simple-slideshow >}}

Note that it’s intended to be used in leaf bundles. Two examples below:

content/
├── posts
│   ├── my-first-post
│   │   ├── image1.jpg
│   │   ├── image2.png
│   │   └── index.md        --> use shortcode here
│   ├── my-second-post
│   │   ├── img
│   │   │   ├── image1.jpg
│   │   │   └── image2.png
│   │   └── index.md        --> or like here

Configuration

• dir - default: / - change where the shortcode looks for images
• topSlideBar - default: true - slidebar for thumbnails on top
• scrollIntoView - default: true - when changing slide scrolls if the image is outside of user’s vision
• maxThumbnailHeight - default: 150 - max thumbnail height in px.
• sortOrder - default: asc - thumbnails sortOrder. For descending desc.

Example:

{{< simple-slideshow dir=img/* topSlideBar=false scrollIntoView=false maxThumbnailHeight=300 >}}

To Do

• ❌ Allow multiple per page
• ❌ Automatically optimize images
• ✅ Page jumping fix
• ✅ Sorting option

See Also

• Academic
• Gallery
• KeepIt
• Paige
• Rocinante