nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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?

Najděte více příspěvků označených jako

Accepted answers

AntGiles

Erin,

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

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

@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></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>

All comments

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.

AntGiles

Erin,

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

#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;
}

deleted-user-Yo2nEyVX5Kjk

Thanks Anthony!

Its working:

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

AntGiles

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.

Připojte se ke konverzaci

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.