hugo-slider-shortcode

KO | EN

gitlite — search

#javascript #hacktoberfest #react #llm #golang #machine-learning #linux #nodejs #awesome #cli #kubernetes #awesome-list #ios #openai

hugo-slider-shortcode

(★ 40)

A shortcode to create a gallery slideshow for the static page generator Hugo.

hugo-slider-shortcode Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# hugo-slider-shortcode
A simple shortcode for hugo to add a gallery slider. It will fetch all images of a specified directory to display as a slideshow.

[A live demo with sample images is available.](https://tbiering.github.io/hugo-slider-shortcode/demo/)

## Installation
Copy the file `gallery-slider.html` to the `/layouts/shortcodes` folder of your hugo installation.

## Usage
1. Place the gallery images in a subfolder inside the `hugo/static` folder (for example `hugo/static/img/portfolio`).
2. Inside your content, use the shortcode `gallery-slider` and pass the subdirectory as the `dir`-parameter.
```go
{{< gallery-slider dir="/img/portfolio/" >}}
```

### Configuration Parameters
| Variable | Default | Description |
| -------------- | ------- | ----------- |
| `dir` | *`none`* | Path to image-folder *(mandatory)* |
| `width` | `500px` | Width of the slider area |
| `height` | `300px` | Height of the slider area |
| `arrow-left` | `fa-chevron-left` | Defines the left icon (See info below) |
| `arrow-right` | `fa-chevron-right` | Defines the right icon |
| `no-fa` | `false` | Toggles dependency inclusion for FontAwesome |
| `no-jquery` | `false` | Toggles dependency inclusion for JQuery |
| `auto-slide` | `0` | Set automatic sliding duration in ms |

#### Icons
You may choose any icon from the FontAwesome CSS-classes listed here: http://fontawesome.io/icons/

#### Examples
```html

{{< gallery-slider dir="/img/portfolio/">}}

{{< gallery-slider dir="/img/portfolio/" width="800px" height="350px" >}}

{{< gallery-slider dir="/img/portfolio/" arrow-left="fa-angle-double-left" arrow-right="fa-angle-double-right" >}}

{{< gallery-slider dir="/img/portfolio/" auto-slide="2000" >}}
```

### Libraries used
This shortcode automatically loads it's necessary dependencies unless disabled via configuration. Thanks to these awesome libraries:
* FontAwesome 4.7.0
* JQuery 1.3.2

## License
Licensed under the MIT license.

For futher information see [LICENSE](LICENSE).

hugo-slider-shortcode

hugo-slider-shortcode Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

hugo-slider-shortcode

hugo-slider-shortcode Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README