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>
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...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.