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:
But it doesn't slide when i paste the code to my banner.
Can anyone lend some advice?
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>