41 posts
    Has been part of the Envato Community for over 3 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 1+ 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 3 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
149 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 :)

1677 posts Multimedia Artistry
    Has referred 100+ members Has sold $75,000+ on Envato Market and is now an Elite Author Has collected 10+ items on Envato Market Contributed a free file of the month
+4 more
dnp_theme says

Starred :)

35 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