Open data: banner rotating images?

Question

Is it possible to add rotating images to the banner page? How would I go about doing this?

CarmellaBurdi1 · Answer

This is wonderful! Thank you so much for sharing!

NFlourish · Answer

Ok. I dug up code to create an example. Sort of. -THIS IS NOT ORIGINALLY MY CSS CODE- What we want is a "pure CSS" slideshow/carousel. I implemented this here: TechDemo I took the CSS code from: https://codepen.io/dudleystorey/pen/kFoGw Modified slightly because Hub filtered out the use of the author's original "figure" and "figcaption" tags. I pointed it at some Pexels content which is free. Note, too, that this is built to show five images. The @keyframes definition and a number of other definitions in the code are built around a five image carousel. <style> @import url(https://fonts.googleapis.com/css?family=Istok+Web); @keyframes slidy { 0% { left: 0%; } 20% { left: 0%; } 25% { left: -100%; } 45% { left: -100%; } 50% { left: -200%; } 70% { left: -200%; } 75% { left: -300%; } 95% { left: -300%; } 100% { left: -400%; } } div.figure { margin: 0; background: #101010; font-family: Istok Web, sans-serif; font-weight: 100; } div#captioned-gallery { width: 100%; overflow: hidden; } div.figure_slider { position: relative; width: 500%; font-size: 0; animation: 30s slidy infinite; margin: 0; background: #101010; font-family: Istok Web, sans-serif; font-weight: 100; } div.figure_slider_figure { width: 20%; height: auto; display: inline-block; position: inherit; margin: 0; background: #101010; font-family: Istok Web, sans-serif; font-weight: 100; } img.figure_slider_img { width: 100%; height: 300px; } div.figure_slider_figure_figcaption { position: absolute; bottom: 0; background: rgba(0,0,0,0.4); color: #fff; width: 100%; font-size: 2rem; padding: .6rem; margin: 0; background: #101010; font-family: Istok Web, sans-serif; font-weight: 100; } style> <div id="captioned-gallery"> <div class="figure_slider"> <div class="figure_slider_figure"> <img class="figure_slider_img" src="https://images.pexels.com/photos/2537598/pexels-photo-2537598.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=300&w=940" alt=""> <div class="figure_slider_figure_figcaption">Hobbiton, New Zealanddiv> div> <div class="figure_slider_figure"> <img class="figure_slider_img" src="https://images.pexels.com/photos/3097112/pexels-photo-3097112.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=300&w=940" alt=""> <div class="figure_slider_figure_figcaption">Wanaka, New Zealanddiv> div> <div class="figure_slider_figure"> <img class="figure_slider_img" src="https://images.pexels.com/photos/2873671/pexels-photo-2873671.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=300&w=940" alt=""> <div class="figure_slider_figure_figcaption">Utah, United Statesdiv> div> <div class="figure_slider_figure"> <img class="figure_slider_img" src="https://images.pexels.com/photos/3121976/pexels-photo-3121976.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=300&w=940" alt=""> <div class="figure_slider_figure_figcaption">Bryce Canyon, Utah, United Statesdiv> div> <div class="figure_slider_figure"> <img class="figure_slider_img" src="https://images.pexels.com/photos/2559175/pexels-photo-2559175.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=300&w=940" alt=""> <div class="figure_slider_figure_figcaption">Bryce Canyon, Utah, United Statesdiv> div> div> div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

NFlourish · Answer

I think the answer is just "yes" ... adding different sorts of content animation and cycling seems engaging and useful for different purposes.