Presenting a Bootstrap friendly version of bxSlider

Hello there authors.

As you all know bxSlider has some awesome in built responsive features, but they do not always meet all of our modern responsive needs.

In one of my personal bootstrap projects I needed bxSlider to adapt to multiple screens and show a specific number of slides on each of them. I also needed to disable some options in some devices and re enable them in other devices.

I ended up writing tonnes of code to achieve my goals. But then I needed to do the same in another project and realised I needed a re-usable solution. The result was a modified version of bxSlider that does the following:

  • Automatically calculates the slide width in carousels
  • Automatically reloads the slider when the screen changes
  • New option to set min and max slides with one value
  • Support for unlimited break points
  • Support for data attributes
  • Self calling ability

In short you can now setup a complex responsive slider without writing any piece of code. Let’s say you wanted to setup a carousel that does the following:

  • Show 4 slides spaced by a 10px margin
  • Show only 3 slide on tablets(min-width 768px)
  • Show only 2 slide on smaller screens(min width 460px) and additionaly disable the pager

With this version the solution is as simple as:

    <ul class="bxslider" data-options="slideMargin:10, slides:4" data-breaks="[{screen:460, slides:2, pager:false},{screen:768, slides:3, pager:true}]">
      <li> <img src="pic1.jpg" /> </li>
      <li> <img src="pic2.jpg" /> </li>
      <li> <img src="pic3.jpg" /> </li>
      <li> <img src="pic4.jpg" /> </li>

You can also make your slider set itself up without writing any code by using the data-call attribute. Add the new autoReload option and you wont even have to worry about reloading your slider anymore.

    <ul data-call="bxslider" data-options="slideMargin:10, slides:4, autoReload:true" >

Authors can use this for free!

This version is released under the same license as the original so you can use it in your projects for free.

Check it out on github

The github project can be found here >> Rahisify/bxslider


Seems like very nice, works nice on phones. Can you create one slider with content inside too, possible?

pebas said

Seems like very nice, works nice on phones. Can you create one slider with content inside too, possible?

Works just like the original bxSlider.

  • Fully responsive - will adapt to any device
  • Horizontal, vertical, and fade modes
  • Slides can contain images, video, or HTML content
  • Full callback API and public methods
  • Small file size, fully themed, simple to implement
  • Browser support: Firefox, Chrome, Safari, iOS, Android, IE7+
  • Tons of configuration options

The original version is found here >>

This is a bootstrap friendly fork of the original.

Starred on github for future use! Thank you for sharing this :slight_smile:

Starred :slight_smile:

Noted. Thanks!