I have a bxslider plugin working on a site I am making for somebody and it works in all browsers except IE9 (possibly earlier versions of IE also but all I have to test it on is 9)
I'm wondering where I'm going wrong in my code. I'll mention it's running alongside the scrolldeck parallax plugin
Here is the related code from my header (calling the bxslider and scrolldeck parallax):
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="tipTip.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.parallax-1.1.3.js"></script>
<script type="text/javascript" src="scripts/jquery.localscroll-1.2.7-min.js"></script>
<script type="text/javascript" src="scripts/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="scripts/jquery.tipTip.js"></script>
<script src="jquery.bxslider.js"></script><!-- bxSlider Javascript file -->
<link href="jquery.bxslider.css" rel="stylesheet" /><!-- bxSlider CSS file -->
<script type="text/javascript">
$(document).ready(function(){
$('#nav').localScroll(800);
//.parallax(xPosition, speedFactor, outerHeight) options:
//xPosition - Horizontal position of the element
//inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
//outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
$('#intro').parallax("50%", 0.6);
$('#second').parallax("50%", 0.5);
$('.bxslider').parallax("50%", 0.8);
$('#third').parallax("50%", 0.6);
$('#fourth').parallax("50%", 0.5);
$('#fifth').parallax("50%", 0.5);
$('#sixth').parallax("50%", 0.8);
$('.bxslider').bxSlider();
})
</script>
Here is where the bxslider is in the body:
<div id="third">
<div class="float-slider">
<!-- <ul class="bxslider">
<li><img src="images/thirdBG3.jpg" /></li>
<li><img src="images/thirdBG4.jpg" /></li>
</ul> -->
<ul class="bxslider">
<li>
<div class="slider-img" style="background: url(images/thirdBG3.jpg) 50%" >
<div class="textBox"><h2 style="margin:0px;padding:0px">The Making Of A Monarch</h2>
<p>TEXT</p></div>
</div>
</li>
<li>
<div class="slider-img" style="background: url(images/thirdBG4.jpg) 50%" >
<div>more Text here</div>
</div>
</li>
</ul>
</div>
<div class="float-left">
<div class="story">
</div>
</div> <!--.story-->
</div> <!--#third-->
And the CSS for the bxslider:
/**
* BxSlider v4.0 - Fully loaded, responsive content slider
* http://bxslider.com
*
* Written by: Steven Wanderski, 2012
* http://stevenwanderski.com
* (while drinking Belgian ales and listening to jazz)
*
* CEO and founder of bxCreative, LTD
* http://bxcreative.com
*/
/** RESET AND LAYOUT
===================================*/
.bx-wrapper {
position:absolute;
margin: 0 0 0 0;
padding: 0;
/**zoom: 1;**/
width:100%;
height:550px;
}
.bx-wrapper img {
display: block;
}
/** THEME
===================================*/
.bx-wrapper .bx-viewport {
-moz-box-shadow: 0 0 0;
-webkit-box-shadow: 0 0 0;
box-shadow: 0 0 0;
border:none;
background: #fff;
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
position: relative;
bottom: 80px;
width: 100%;
}
/* LOADER */
.bx-wrapper .bx-loading {
min-height: 50px;
background: url(images/bx_loader.gif) center center no-repeat #fff;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 500;
}
/* PAGER */
.bx-wrapper .bx-pager {
text-align: center;
font-size: .85em;
font-family: Arial;
font-weight: bold;
color: #666;
padding-top: 0;
}
.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
display: inline-block;
*zoom: 1;
*display: inline;
}
.bx-wrapper .bx-pager.bx-default-pager a {
background: #666;
text-indent: -9999px;
display: block;
width: 10px;
height: 10px;
margin: 0 5px;
outline: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
background: #000;
}
/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-next{
position:relative;
}
.bx-wrapper .bx-prev {
left: 20px;
background: url(images/controls.png) no-repeat 0 -32px;
}
.bx-wrapper .bx-next {
right: 20px;
background: url(images/controls.png) no-repeat -43px -32px;
}
.bx-wrapper .bx-prev:hover {
background-position: 0 0;
}
.bx-wrapper .bx-next:hover {
background-position: -43px 0;
}
.bx-wrapper .bx-controls-direction a { /**SIZE OF NEXT AND PREV BUTTONS**/
position: absolute;
top: 50%;
margin-top: -16px;
outline: 0;
width: 32px;
height: 32px;
text-indent: -9999px;
z-index: 100;
}
.bx-wrapper .bx-controls-direction a.disabled {
display: none;
}
/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {
text-align: center;
}
.bx-wrapper .bx-controls-auto .bx-start {
display: block;
text-indent: -9999px;
width: 10px;
height: 11px;
outline: 0;
background: url(images/controls.png) -86px -11px no-repeat;
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
background-position: -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
display: block;
text-indent: -9999px;
width: 9px;
height: 11px;
outline: 0;
background: url(images/controls.png) -86px -44px no-repeat;
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
background-position: -86px -33px;
}
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
text-align: left;
width: 80%;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
right: 0;
width: 35px;
}
/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {
position: absolute;
bottom: 0;
left: 0;
background: #666\9;
background: rgba(80, 80, 80, 0.75);
width: 100%;
}
.bx-wrapper .bx-caption span {
color: #fff;
font-family: Arial;
display: block;
font-size: .85em;
padding: 10px;
}
Any help would be hot. PS. Also, when I resize the window the bxslider buttons stop working...I've tried re-initializing it when the window resizes but all it does is duplicates the bxslider and creates hundreds of instances of the thing.
I had a exactly the same problem. I resolved it by modifying the plugin core file. I replaced all 5 <a> elements (which had empty href attribute) with <span> tags, cleared cache and it works marvelous.
It might also be enough to just supply some anchor (setting href="#top" for example), yet in my case the slider was quite high, and I wanted to avoid the page jumping up, or to some specified point every time the next/prev buttons are clicked.
来源：https://stackoverflow.com/questions/14556702/bxslider-not-working-in-ie9