Slider on Organization Homepage Banner

[deleted-user-Yo2nEyVX5Kjk]

I came across this organization homepage and like the looks of their slider banner:

http://kygeonet.maps.arcgis.com/home/index.html

So I have duplicated the code for my own here:

AKMapsHeaderImageSlider

But it doesn't slide when i paste the code to my banner.

Can anyone lend some advice?

[RebeccaStrauch__GISP]

Hi Erin,

its ts showing up "sliding" on my ipad/Safari.   Pretty cool.  Love to see you code as it would be a good loo for ADFG too...consistent across state.

maybe clear your browser or maybe network/ETS is blocking it.

[deleted-user-Yo2nEyVX5Kjk]

Link to my organization page:

http://soa-dnr.maps.arcgis.com/home/index.html

Problem is, it doesn't seem to slide here.

[RebeccaStrauch__GISP]

ok.  there it didn't slide for me either.

[AnthonyGiles · Accepted solution]

Erin,

Did you copy all the .css etc... try pasting this into your banners custom design:

<div class="homeRotatorPanel" id="homeRotate">
            <div class="detailsShort" id="details">
              <div class="matrixLayoutShort" id="matrixLayout">
                <div class="imgRotator" id="imgRotator" style="position: relative;">
                <div id="banner-html" style="left: 0px; top: 0px; position: absolute;">

<title>KyGovMapsAnimatedBanner</title>
<meta content="KyGovMapsAnimatedBanner" name="description" />
<meta content="KyGovMaps, KyGeoNet" name="keywords" />
<link href="http://kygeonet.ky.gov/kygeonet.ico" rel="SHORTCUT ICON"></link>

<style>#header .nav a, .esri #header-controls ul li a, #header_map_newMap.map_nav a.map_nav_link{color: #336699; text-decoration: none;}</style>

<style>
/* ANIMATION */

@keyframes cycle {
0%  { left:0px; }
4%  { left:0px; }
16% { left:0px; }
20% { left:960px; }
21% { left:-960px; z-index:-1; }
92% { left:-960px; }
96% { left:-960px; }
100%{ left:0px; }

}
@keyframes cycletwo {
0%  { left:-960px; }
16% { left:-960px; }
20% { left:0px; }
24% { left:0px; }
36% { left:0px; }
40% { left:960px; }
41% { left:-960px; }
100%{ left:-960px; }
}
@keyframes cyclethree {
0%  { left:-960px; }
36% { left:-960px; }
40% { left:0px; }
44% { left:0px; }
56% { left:0px; }
60% { left:960px;}
61% { left:-960px; }
100%{ left:-960px;}
}
@keyframes cyclefour {
0%  { left:-960px; }
56% { left:-960px; }
60% { left:0px; }
64% { left:0px; }
76% { left:0px; }
80% { left:960px; }
81% { left:-960px; }
100%{ left:-960px; }
}
@keyframes cyclefive {
0%  { left:-960px; }
76% { left:-960px; }
80% { left:0px; }
84% { left:0px; }
96% { left:0px; }
100%{ left:960px; }
}

@-moz-keyframes cycle {
0%  { left:0px; }
4%  { left:0px; }
16% { left:0px;}
20% { left:960px; }
21% { left:-960px; }
92% { left:-960px; }
96% { left:-960px; }
100%{ left:0px; }

}
@-moz-keyframes cycletwo {
0%  { left:-960px; }
16% { left:-960px; }
20% { left:0px; }
24% { left:0px; }
36% { left:0px; }
40% { left:960px; }
41% { left:-960px; }
100%{ left:-960px; }
}
@-moz-keyframes cyclethree {
0%  { left:-960px; }
36% { left:-960px; }
40% { left:0px; }
44% { left:0px; }
56% { left:0px; }
60% { left:960px; }
61% { left:-960px;  }
100%{ left:-960px; }
}
@-moz-keyframes cyclefour {
0%  { left:-960px; }
56% { left:-960px; }
60% { left:0px; }
64% { left:0px; }
76% { left:0px;  }
80% { left:960px; }
81% { left:-960px;}
100%{ left:-960px; }
}
@-moz-keyframes cyclefive {
0%  { left:-960px; }
76% { left:-960px; }
80% { left:0px; }
84% { left:0px; }
96% { left:0px; }
100%{ left:960px;}
}

@-webkit-keyframes cycle {
0%  { left:0px; }
4%  { left:0px; }
16% { left:0px; }
20% { left:960px;  }
21% { left:-960px; }
50% { left:-960px;  }
92% { left:-960px; }
96% { left:-960px; }
100%{ left:0px; }

}
@-webkit-keyframes cycletwo {
0%  { left:-960px; }
16% { left:-960px; }
20% { left:0px; }
24% { left:0px; }
36% { left:0px; }
40% { left:960px; }
41% { left:-960px; } 
100%{ left:-960px;}
}
@-webkit-keyframes cyclethree {
0%  { left:-960px; }
36% { left:-960px; }
40% { left:0px; }
44% { left:0px; }
56% { left:0px; }
60% { left:960px; }
61% { left:-960px;}
100%{ left:-960px; }
}
@-webkit-keyframes cyclefour {
0%  { left:-960px; }
56% { left:-960px; }
60% { left:0px; }
64% { left:0px; }
76% { left:0px; }
80% { left:960px; }
81% { left:-960px; }
100%{ left:-960px; }
}
@-webkit-keyframes cyclefive {
0%  { left:-960px; }
76% { left:-960px; }
80% { left:0px; }
84% { left:0px; }
96% { left:0px; }
100%{ left:960px; }
}

/*  Overlay Image  */
.overlay-image {
   height: 180px;
   width: 960px;
   margin: 0;
   padding: 0;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
   z-index: 1;
   border: 0;
   }

/* LAYOUT */
.kycontainer {
margin:0;
padding:0;
top: 0;
left:0;
position: absolute;
width: 960px;
height: 180px;
-webkit-border-radius:0 0 10px 10px;
-moz-border-radius:0 0 10px 10px;
-o-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px;
overflow:hidden;
z-index:0;
}

/* CONTENT SLIDER */
#kycontent-slider {
width:100%;
height:180px;
margin: 0;
}
/* SLIDER */
#kyslider {
border:0px;
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
height: 180px;
width: 960px;
margin: 0;
padding: 0;
top: 0;
left: 0;
overflow: hidden;
position: relative;
}

#kymask{
overflow: hidden;
height: 180px;
width: 960px;
}

#kyslider ul {
margin:0;
padding:0;
position:relative;
}
#kyslider li {
width:960px;
height:180px;
position:absolute;
left:-960px;  /*this hides it beside the banner*/
list-style:none;
}

#kyslider li.firstanimation {
animation:cycle 30s ease-in infinite;
-moz-animation:cycle 30s ease-in infinite;
-webkit-animation:cycle 30s ease-in infinite;
}
#kyslider li.secondanimation {
animation:cycletwo 30s ease-in infinite;
-moz-animation:cycletwo 30s ease-in infinite;
-webkit-animation:cycletwo 30s ease-in infinite;
}
#kyslider li.thirdanimation {
animation:cyclethree 30s ease-in infinite;
-moz-animation:cyclethree 30s ease-in infinite;
-webkit-animation:cyclethree 30s ease-in infinite; 
}
#kyslider li.fourthanimation {
animation:cyclefour 30s ease-in infinite;
-moz-animation:cyclefour 30s ease-in infinite;
-webkit-animation:cyclefour 30s ease-in infinite; 
}
#kyslider li.fifthanimation {
animation:cyclefive 30s ease-in infinite;
-moz-animation:cyclefive 30s ease-in infinite;
-webkit-animation:cyclefive 30s ease-in infinite; 
}
</style>

<div class="kycontainer">
<div id="kycontent-slider">
     <div id="kyslider">
         <div id="kymask">
            <ul>
            <li class="firstanimation" id="first">
            <a href="#">
            <img alt="Elevation" src="http://kygeonet.ky.gov/agol/images/AGOL_Header_elevation_only.png" style="border-radius: 0px 0px 10px 10px; -moz-border-radius: 0 0 10px 10px; -o-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px;" />
            </a>
            </li>

            <li class="secondanimation" id="second">
            <a href="#">
            <img alt="Aerial" src="http://kygeonet.ky.gov/agol/images/AGOL_Header_aerial_only.png" style="border-radius: 0px 0px 10px 10px; -moz-border-radius: 0 0 10px 10px; -o-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px;" />
            </a>
            </li>
           
            <li class="thirdanimation" id="third">
            <a href="#">
            <img alt="Land Cover" src="http://kygeonet.ky.gov/agol/images/AGOL_Header_landcover_only.png" style="border-radius: 0px 0px 10px 10px; -moz-border-radius: 0 0 10px 10px; -o-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px;" />
            </a>
            </li>
                       
            <li class="fourthanimation" id="fourth">
            <a href="#">
            <img alt="Geology" src="http://kygeonet.ky.gov/agol/images/AGOL_Header_geology_only.png" style="border-radius: 0px 0px 10px 10px; -moz-border-radius: 0 0 10px 10px; -o-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px;" />
            </a>
            </li>
                       
            <li class="fifthanimation" id="fifth">
            <a href="#">
            <img alt="Aerial 2" src="http://kygeonet.ky.gov/agol/images/AGOL_Header_aerial2_only.png" style="border-radius: 0px 0px 10px 10px; -moz-border-radius: 0 0 10px 10px; -o-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px;" />
            </a>
            </li>
            </ul>
            </div>
        </div>
   
    <div class="overlay-image">
    <img alt="KyGovMapsImage" src="http://kygeonet.ky.gov/agol/images/AGOL_Header_trans.png" style="border-radius: 0px 0px 10px 10px; -moz-border-radius: 0 0 10px 10px; -o-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px;" usemap="#kygov" />
                <map name="kygov">
                  <area alt="Kentucky.Gov Webpage" coords="862,95,71" href="http://kentucky.gov/" shape="circle" target="_blank" />
                </map>
   </div>
   </div>
</div>

</div></div>
                <div class="dots" id="categories" style="display: none;"><ul><li class="dojoxRotatorNumber dojoxRotatorSelected dojoxRotatorPane0 dojoxRotatorFirst dojoxRotatorLast"><a href="#"><span>1</span></a></li></ul></div>
              </div>
            </div>
          </div>

[deleted-user-Yo2nEyVX5Kjk]

Thanks Anthony!

Its working:

http://soa-dnr.maps.arcgis.com/home/index.html

[AnthonyGiles]

I have found that IE8 does not like the code above, not managed to find a solution yet as the formatting box does not like script tags or HTML comment tags.

I will let you know if I found a solution.

[deleted-user-Yo2nEyVX5Kjk]

Thanks, I'll keep looking as well.

[AnthonyGiles]

Erin,

The list of supported HTML Tags can be found here:

Supported HTML for configuring the website—Help | ArcGIS

It says any HTML tags not listed in the table above are not supported and will be filtered out

[deleted-user-Yo2nEyVX5Kjk]

Not cool!