Open data: banner rotating images?

Anonymous User — Wed, 26 Jul 2017 18:32:59 GMT

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

Re: Open data: banner rotating images?

Anonymous User — Tue, 02 Apr 2019 12:40:44 GMT

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?

Re: Open data: banner rotating images?

NFlourish — Thu, 24 Oct 2019 14:25:10 GMT

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

Re: Open data: banner rotating images?

NFlourish — Sat, 11 Dec 2021 14:18:23 GMT

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Open data: banner rotating images?

CarmellaBurdi1 — Thu, 28 Jul 2022 13:19:27 GMT

This is wonderful! Thank you so much for sharing!

topic Re: Open data: banner rotating images? in ArcGIS Hub Questions

Open data: banner rotating images?

Re: Open data: banner rotating images?

Re: Open data: banner rotating images?

Re: Open data: banner rotating images?

Re: Open data: banner rotating images?