Scrolling Images Gallery/Slider

Hello !

So I’ve been hunting round trying to find out how It could be possible with hugo/ CSS or even Jquery to have on our site an image slider/gallery that auto scrolls or is in some way animated.

Adjusted from this guide http://qnimate.com/creating-a-slider-using-html-and-css-only/

Atm we have the following,

<div class="slider-holder">
        <span id="slider-image-1"></span>
        <span id="slider-image-2"></span>
        <span id="slider-image-3"></span>
        <div class="image-holder">
            <img src="/images/123.png" class="slider-image" />
            <img src="/images/123.png" class="slider-image" />
            <img src="/images/123.png" class="slider-image" /> 
            <img src="/images/123.png" class="slider-image" />
            <img src="/images/123.png" class="slider-image" />    
            <img src="/images/123.png" class="slider-image" />   
        </div>

This creates multiple rows for the images and allows us to have and easily add images to the slider. However it would be good to have a 3+ x 2 Grid of sorts like the above that scrolls across like a moving banner.

It used to be setup so the overflow was hidden but you can add more images they were taken off screen but unless you know how to scroll across it wasnt too obvious to do so.

We did use navigation buttons but the idea would be it auto scrolls or is in some way animated to show of each row of images.

Current CSS is as follows,

.slider-holder {
    max-width: 1050px;
    height: 280px;
    margin-top: 0px;
    text-align: center;
    /*overflow: hidden;*/
    overflow-x: scroll;
    /*overflow-y: scroll;*/
    white-space: nowrap;
    margin-left: auto;
}

.image-holder {
    width: 1050px;
    height: 260px;
    clear: both;
    position: sticky;
    -webkit-transition: left 2s;
    -moz-transition: left 2s;
    -o-transition: left 2s;
    transition: left 2s;
    /*overflow: hidden;
    overflow-x: scroll;
    overflow-y: hidden;*/
    white-space: nowrap;
}

.slider-image {
    float: left;
    margin: 0px;
    padding: 0px;
    position: relative;
    max-width: 350px;
    max-height: 130px;
    min-width: 350px;
    min-height: 130px;
}

Any ideas how to animate something like the above that doesnt require one massively long image ?

Autoscrolling and animation sound like things that can be accomplished using javascript. You can incorporate any of that sort of thing in a Hugo site; just refer to the library’s documentation and incorporate it, for example:

  • loading a required js file from your header partial, or, a partial loaded at the bottom of your body tag
  • putting some conditional template code in your single template, and maybe use a flag in frontmatter to turn the slider on or off

For example, this content page:

… has markdown files and images in its folder. The markdown files have frontmatter that define images and flags:

https://raw.githubusercontent.com/RickCogley/eSolia_2018/master/content/page/infrastructure/index.en.md

… and the single loads the gallery partial if it finds an id (a legacy setting from the previous site; the flag could be a boolean or whatever you want):

The bottom line is, there’s no canonical way to do it. You just find the library you want to use, and incorporate it following its instructions, thinking about Hugo as a way to assemble your templates, css, js into html files that can be browsed. You can do whatever you need to.

Do you have a repo, please link it here

So turns out I can be done, managed to find a spot on article that does exactly that with just CSS

@ Kaicastledine Were you able to make the CSS solution responsive? For me, it works well on my desktop but on mobile, it creates a huge amount of empty screen on the right.

Yeah just needed to make some changes to the mobile css

You can get it working with some tinkering
Here it is currently (bottom of the page)
https://cyborg.ksecsolutions.com/