simple-slideshow-hugo

Images: 1 2 3 4 5 6
Theme: simple-hugo
Arrow SVG: Edited and downloaded from here

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

Instalation

1. As a theme

Clone into themes:

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

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

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

2. Just copying

Save simple-slideshow.html to layouts/shortcodes/simple-slideshow.html in your project's directory.

Usage

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
• icon - default: svg/simple-slideshow-arrow.svg - path to an arrow svg. Will use it as a resource, so you must put it in the assets folder.
• loopImages - default: false - trying to get image after last/before first with cause it to go back to the beginning/end
• 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

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