jquery Slide plugin bxslider Style Improvement Example _jquery

This article describes the jquery slide plugin bxslider style improvement method, share for everyone to reference. Specifically as follows:

Compared to a lot of jquery slides, all feel not very good, and finally found Bxslider compatibility is best, mobile devices support manual flip.

But the official display is really hard to see and it's hard to accept. Finally, I can only DIY.

Bxslider official style is as follows:

The modified style is as follows:

First step: Introduce Bxslider

Copy Code code as follows:

<!--JQuery Library (served from Google)-->
<script src= "//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" ></script>
<!--bxslider Javascript file-->
<script src= "/js/jquery.bxslider.min.js" ></script>
<!--bxslider CSS file-->
<link href= "/lib/jquery.bxslider.css" rel= "stylesheet"/>
<!--JQuery Library (served from Google)-->
<script src= "//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" ></script>
<!--bxslider Javascript file-->
<script src= "/js/jquery.bxslider.min.js" ></script>
<!--bxslider CSS file-->
<link href= "/lib/jquery.bxslider.css" rel= "stylesheet"/>

Step Two: Add bxslider HTML code

Copy Code code as follows:

<div id= "Slider_block" >
<ul class= "Bxslider" >
<foreach name= "slidelist" item= "obj" >
<li><a href= "{$obj. link_addr}" target= _blank "></a></li>
</foreach>
</ul>
<div id= "Slider-pager" >
<foreach name= "slidelist" item= "obj" key= "I" >
<a data-slide-index= ' {$i} ' href= ' class= ' pager-link ' >{$i}</a>
</foreach>
</div>
</div>
<div id= "Slider_block" >
<ul class= "Bxslider" >
<foreach name= "slidelist" item= "obj" >
<li><a href= "{$obj. link_addr}" target= _blank "></a></li>
</foreach>
</ul>
<div id= "Slider-pager" >
<foreach name= "slidelist" item= "obj" key= "I" >
<a data-slide-index= ' {$i} ' href= ' class= ' pager-link ' >{$i}</a>
</foreach>
</div>
</div>

The official HTML code of the original is this:

Copy Code code as follows:

<ul class= "Bxslider" >
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class= "Bxslider" >
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

On this basis, created a slider_block of the parent-layer Div, set position as relative, mainly for the slider-pager of the child layer of absolute positioning page "1,2,3."

Step three: Modify CSS jquery.bxslider.css to increase Slider-pager CSS style optimization

Copy Code code as follows:

#slider_block {position:relative;margin:0 Auto;height:245px;margin-top:10px;overflow:hidden;}
#slider-pager{position:absolute;bottom:10px;right:10px;z-index:999;font-size:0px;}
#slider-pager Pager-link {float:left;width:15px;height:15px;line-height:15px;text-align:center;margin:0 0 0 10px;b Ackground: #FC0; color: #930;}
#slider-pager. Active {background: #0C3; color: #fff;}

/* Remove shadow effect, browser not compatible by 4JCMS * *
/*.bx-wrapper. Bx-viewport {
-moz-box-shadow:0 0 5px #ccc;
-webkit-box-shadow:0 0 5px #ccc;
box-shadow:0 0 5px #ccc;
Border:solid #fff 5px;
Left: -5px;
Background: #fff;
}

*/
#slider_block {position:relative;margin:0 Auto;height:245px;margin-top:10px;overflow:hidden;}
#slider-pager{position:absolute;bottom:10px;right:10px;z-index:999;font-size:0px;}
#slider-pager Pager-link {float:left;width:15px;height:15px;line-height:15px;text-align:center;margin:0 0 0 10px;b Ackground: #FC0; color: #930;}
#slider-pager. Active {background: #0C3; color: #fff;}

/* Remove shadow effect, browser not compatible by 4JCMS * *
/*.bx-wrapper. Bx-viewport {
-moz-box-shadow:0 0 5px #ccc;
-webkit-box-shadow:0 0 5px #ccc;
box-shadow:0 0 5px #ccc;
Border:solid #fff 5px;
Left: -5px;
Background: #fff;
}
*/

The final transformation is complete.