Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript make this css3 slideshow work in IE9 and

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #192282
    Baerspective
    Participant

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

    #192329
    shaneisme
    Participant

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.