BxSlider Rahisified! A custom super responsive and bootstrap friendly version of bxSlider v4.1.2

Step 1. setup your slider

First setup your carousel as you would setup any other bxSlider slider.

 
    <ul id="myslider" class="bxslider">
      <li> <img src="pic1.jpg" /> </li>
      <li> <img src="pic2.jpg" /> </li>
      <li> <img src="pic3.jpg" /> </li>
      <li> <img src="pic4.jpg" /> </li>
      <li> <img src="pic5.jpg" /> </li>
      <li> <img src="pic6.jpg" /> </li>
    </ul>
 

Step 2: Call the slider

Simply create a data attribute named data-call and set it's value to 'bxslider' and the slider will set itself up!

 
    <ul class="bxslider" data-call="bxslider" >
 

Step 3: set default options

You can use a handy data attribute I created called data-options to pass any configuration options. All of BxSlider's options are supported together with 3 new additional options.

• screen: defines a minimum screen size to target
• slides: a quick way of setting both min and max slides with one value
• autoReload: forces the slider to be reloaded when the screen size changes

 
    <ul id="myslider" class="bxslider" data-call="bxslider" data-options="slideMargin:5, autoReload:true" >
 

Step 4: Define break points

Each break point is defined as a set configuration objects enclosed in curly brackets. All of BxSlider's options are supported.

 
    [{screen:460, slides:2, pager:false, controls:true}]
 

The above will be interpreted as follows:

• Target a minimum screen size of 460px
• Only show 2 slides at that screen size
• Set the pager option to false at that screen size
• Set the controls option to true at that screen size

Multiple break points are separated by commas and set inside a data attribute named data-breaks. To target the least possible screen size use screen:0

 
    data-breaks="[{screen:0, slides:1, pager:false},{screen:460, slides:2},{screen:768, slides:3}]"
 

Step 5: Put everything together

This is how your slider should look once you put everything together.

 
    <ul id="myslider" class="bxslider" data-call="bxslider" data-call="bxslider" data-options="slideMargin:5, autoReload:true" data-breaks="[{screen:0, slides:1, pager:false},{screen:460, slides:2},{screen:768, slides:3}]">
      <li> <img src="pic1.jpg" /> </li>
      <li> <img src="pic2.jpg" /> </li>
      <li> <img src="pic3.jpg" /> </li>
      <li> <img src="pic4.jpg" /> </li>
      <li> <img src="pic5.jpg" /> </li>
      <li> <img src="pic6.jpg" /> </li>
    </ul>
 

Calling the slider via javascript is still supported

You can still call bxSlider the usual way if you do not like data attributes.

 
    $(document).ready( function() {
    
        $('#myslider').bxSlider({
          slideMargin: 5,
          autoReload: true,
          breaks: [{screen:0, slides:1, pager:false},{screen:460, slides:2},{screen:768, slides:3}]
        });
      
    });
 

Thats it!

See how easy this is? Now resize the browser window and see the slider obey each and every one of your commands.