jquery slide plug-in bxslider style improvement example_jquery

The example in this article describes how to improve the style of the jquery slideshow plug-in bxslider, and shares it with everyone for your reference. The details are as follows:

I compared many jquery slides and found them not very good. Finally, I found that bxslider has the best compatibility and supports manual flipping on mobile devices.

But the official display effect is really ugly and unacceptable. In the end I had to DIY it myself.

The official style of bxslider is as follows:

The modified style is as follows:

Step 1: Introduce bxslider

Copy code The code is as follows:

Step 2: Add bxslider html code

Copy code The code is as follows:

                                                                                                                                                                                                                                     

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 

• 

{$i}

The original official html code is like this:





Copy code

The code is as follows:

• 


• 


• 


• 

• 


• 


• 


• 

On this basis, a parent layer DIV of slider_block is created, and the position is set to relative, mainly to turn pages "1, 2, 3" for the absolute positioning of the sub-layer slider-pager.

Step 3: Modify CSS jquery.bxslider.css and add CSS style optimization for slider-pager

Copy code The code is 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;background: #FC0;color: #930; }
#slider-pager .active {background: #0C3;color: #fff;}

/*Remove shadow effect, browser is 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;background: #FC0;color: #930; }
#slider-pager .active {background: #0C3;color: #fff;}

/*Remove shadow effect, browser is 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;
}
*/

Final renovation completed