41 posts
  • Has been part of the Envato Community for over 4 years
  • Has sold $100+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
Rahisify says

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>
    </ul>
 

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

Cheers.

273 posts
  • Has referred 10+ members
  • Has sold $40,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+3 more
pebas says

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

41 posts
  • Has been part of the Envato Community for over 4 years
  • Has sold $100+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
Rahisify says

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 >> http://bxslider.com

This is a bootstrap friendly fork of the original.

DistinctiveThemes
DistinctiveThemes Recent Posts Threads Started
157 posts
  • Located in United Kingdom
  • Has sold $10,000+ on Envato Market
  • Has been part of the Envato Community for over 1 year
  • Has referred 1+ members
+2 more
DistinctiveThemes says

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

1702 posts Multimedia Artistry
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has been part of the Envato Community for over 3 years
  • Contributed a free file of the month
  • Won a Most Wanted contest
+4 more
dnp_theme says

Starred :)

36 posts
  • Has referred 1+ members
  • Has sold $5,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
RepublikWP says

Noted. Thanks!

by
by
by
by
by
by