Open data: banner rotating images?

[Anonymous User]

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

[Anonymous User]

Best way to do this today is in an Iframe (you'd have to write a little HTML/CS/Javascript to do it and host the code somewhere). 

We'll take this request under consideration. Are you more interested in having the banner card rotate images or an entire row background image having a collection that rotate? Something else?

[NFlourish]

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

[NFlourish]

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&amp;cs=tinysrgb&amp;dpr=2&amp;h=300&amp;w=940" alt="">
            <div class="figure_slider_figure_figcaption">Hobbiton, New Zealand</div>
        </div>
        <div class="figure_slider_figure">
            <img class="figure_slider_img" src="https://images.pexels.com/photos/3097112/pexels-photo-3097112.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=300&amp;w=940" alt="">
            <div class="figure_slider_figure_figcaption">Wanaka, New Zealand</div>
        </div>
        <div class="figure_slider_figure">
            <img class="figure_slider_img" src="https://images.pexels.com/photos/2873671/pexels-photo-2873671.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=300&amp;w=940" alt="">
            <div class="figure_slider_figure_figcaption">Utah, United States</div>
        </div>
        <div class="figure_slider_figure">
            <img class="figure_slider_img" src="https://images.pexels.com/photos/3121976/pexels-photo-3121976.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=300&amp;w=940" alt="">
            <div class="figure_slider_figure_figcaption">Bryce Canyon, Utah, United States</div>
        </div>
        <div class="figure_slider_figure">
            <img class="figure_slider_img" src="https://images.pexels.com/photos/2559175/pexels-photo-2559175.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=3&amp;h=300&amp;w=940" alt="">
            <div class="figure_slider_figure_figcaption">Bryce Canyon, Utah, United States</div>
        </div>
    </div>
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[CarmellaBurdi1]

This is wonderful! Thank you so much for sharing!