Question

I am currently re creating my portfolio page , It is a work in progress…
On my home page I have a bxslider from bxslider.com , it works in all other browsers but on IE , it has no transitions and just simply stacks the images on top of each other…

The page can be viewed here

CSS as follows:

#slides
{
width:100%;
height:400px;
margin-top:150px;
background-image:url('low_contrast_linen.png');
background-repeat:repeat;
z-index:-3;
border-bottom: 4px solid #ff7373;   
}

#slideshowwrap
{
 margin:0 auto;
 width:900px;
 height:250px;
 margin-top: 50px;
 z-index:-3;    
 }

#slider1
{
 width:1300px;
 height:300px;
 position: fixed;
}

HTML as follows:

<div id="slides">
    Slideshow goes here (Full Width)
    <div id="slideshowwrap">
        <div id="slider1">
            <div> <img src="slideone.png" alt="slide one"/> </div>
            <div><img src="slidetwo.png" alt="slide two"/></div>
            <div> <img src="slidethree.png" alt="slide three" /> </div>
            <div><img src="slidefour.png" alt="slide four"/></div>
        </div>
    </div>

Answer 1

Create on your root server folder a new javascript file and call it bxSlider.min.js .
Copy/Paste in it content of https://raw.github.com/wandoledzep/bxslider/master/jquery.bxSlider.min.js

Replace in your code:

 <script src="https://raw.github.com/wandoledzep/bxslider/master/jquery.bxSlider.min.js" type="text/javascript"></script>

by (assuming you put your freshly created script file in same folder as your index.html):

<script src="bxSlider.min.js" type="text/javascript"></script>

See now whats going on…