Standard

Sretched

Navigation

Backgrounds
  • Project 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie, arcu et sodales tristique, nulla lectus semper dolor, in ornare purus nisi at lectus.

    More about Project 1
  • Project 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie, arcu et sodales tristique, nulla lectus semper dolor, in ornare purus nisi at lectus.

    More about Project 2

bxSlider UsageHomeCodes › bxSlider Usage

bxSlider

bxSlider by Steven Wanderski is a jQuery content slider and image slideshow. You can check out documentation, usage and support at the bxSlider homepage.


Images

Use the Slider PSD'S supplied to create images the right width and height.


Javascript

Make sure these are located in the <head> above. jQuery is also required.

<link rel="stylesheet" type="text/css" href="scripts/bxslider/bx_styles.css" />
<script src="scripts/bxslider/jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider1').bxSlider({
auto: true,
pause: 9000,
mode: 'fade',
controls: false,
pager: true
});
});
</script>

HTML

Insert this HTML where you want your slider.

<div class="feature">
<ul id="slider1">
<li>
<img src="your-image-location.jpg" alt="" />
</li>
<li>
<img src="your-image-location.jpg" alt="" />
<div class="text-desc">
<h3>Title</h3>
<p>description</p>
</div>
</li>
</ul>
</div>

Note that there are two types of slides:

Full width - standard full image slide.

Split width - smaller image slide with HTML content area on the right


Official Documentation and Support

Official documentation located at bxslider.com.