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 ?