Home › Forums › JavaScript › make this css3 slideshow work in IE9 and
- This topic is empty.
-
AuthorPosts
-
January 5, 2015 at 12:44 pm #192282BaerspectiveParticipant
i moved this query to this forum in the hopes someone can help me make the following slideshow work in older IEs.
i know nothing to speak of about JS scripting. perhaps someone can lead me to a site who can show me how to make a fallback
this is the slideshow which works in all browsers except for legacy IE
http://baerspective.com/alcan/
thanks for all your help
.container {
overflow:hidden;
position: relative;
width: auto;
padding: 2em 1.5em;
color: rgba(0,0,0, 0.8);
text-shadow: 0 1px 0 #fff;
line-height:1.8;
top: -5em;
z-index:1;
}#content-slider {
width:auto;
height:382px;
margin: 2px auto 0;
}#slider {
background:#000;
border: 5px solid #eaeaea;
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
height:382px;
width:auto;
margin:10px auto 0;
overflow:visible;
position:relative;
z-index: 1;
top: 1em;
-o-border-radius: 2px 2px 2px 2px;
-ms-border-radius: 2px 2px 2px 2px;
-webkit-border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
border-radius: 2px 2px 2px 2px;
-o-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
-ms-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
-webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
-moz-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}#slider:before, #slider:after {
position: absolute;
display:block;
bottom:16px;
width: 35%;
height: 10px;
content: ” “;
background: rgba(0,0,0,0.1);
-o-border-radius: 25%;
-ms-border-radius: 25%;
-webkit-border-radius: 25%;
-moz-border-radius: 25%;
border-radius: 25%;
-o-box-shadow: 0 0 2px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
-ms-box-shadow: 0 0 2px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
-webkit-box-shadow: 0 0 2px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
-moz-box-shadow: 0 0 2px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
box-shadow: 0 0 2px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
z-index: -3;
}#slider:before {
left:0;
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
transform: rotate(-4deg);
}#slider:after {
right:0;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-ms-transform: rotate(4deg);
-o-transform: rotate(4deg);
transform: rotate(4deg);
}#mask {
overflow:hidden;
height:380px;
}#slider ul {
margin:0;
padding:0;
position:relative;
}#slider li {
width:949px;
height:382px;
position:absolute;
list-style:none;
top: -384px;
}#slider img {
width:949px;
height:382px;
margin-left: -4em;
}#slider li.firstanimation {
-moz-animation:cycle 25s linear infinite;
-webkit-animation:cycle 25s linear infinite;
-ms-animation:cycle 25s linear infinite;
-o-animation:cycle 25s linear infinite;
animation:cycle 25s linear infinite;
}
#slider li.secondanimation {
-moz-animation:cycletwo 25s linear infinite;
-webkit-animation:cycletwo 25s linear infinite;
-ms-animation:cycletwo 25s linear infinite;
-o-animation:cycletwo 25s linear infinite;
animation:cycletwo 25s linear infinite;
}
#slider li.thirdanimation {
-moz-animation:cyclethree 25s linear infinite;
-webkit-animation:cyclethree 25s linear infinite;
-ms-animation:cyclethree 25s linear infinite;
-o-animation:cyclethree 25s linear infinite;
animation:cyclethree 25s linear infinite;
}
#slider li.fourthanimation {
-moz-animation:cyclefour 25s linear infinite;
-webkit-animation:cyclefour 25s linear infinite;
-ms-animation:cyclefour 25s linear infinite;
-o-animation:cyclefour 25s linear infinite;
animation:cyclefour 25s linear infinite;
}
#slider li.fifthanimation {
-moz-animation:cyclefive 25s linear infinite;
-webkit-animation:cyclefive 25s linear infinite;
-ms-animation:cyclefive 25s linear infinite;
-o-animation:cyclefive 25s linear infinite;
animation:cyclefive 25s linear infinite;
}January 5, 2015 at 5:53 pm #192329shaneismeParticipantTwo things:
http://caniuse.com/#search=css-animation
http://shouldiuseacarousel.com/
If you really do need one, there’s about a million of these with stuff baked in that you don’t need much knowledge of JS (Google jQuery carousel)… just follow some instructions and you’re off.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.