Open data: banner rotating images?

797
3
07-26-2017 11:32 AM
JorgeGoicochea1
New Contributor III

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

Tags (1)
3 Replies
GrahamHudgins
Esri Regular Contributor

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?

0 Kudos
NFlourish
Occasional Contributor

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

0 Kudos
NFlourish
Occasional Contributor

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