jquery Slide plugin bxslider Style Improvement Example _jquery

Source: Internet
Author: User
Tags wrapper jquery library

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.