41 posts
  • Bought between 1 and 9 items
  • Exclusive Author
  • Has been a member for 3-4 years
  • Sold between 100 and 1 000 dollars
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.

272 posts
  • Europe
  • Has been a member for 5-6 years
  • Sold between 10 000 and 50 000 dollars
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
pebas says

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

41 posts
  • Bought between 1 and 9 items
  • Exclusive Author
  • Has been a member for 3-4 years
  • Sold between 100 and 1 000 dollars
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
135 posts
  • United Kingdom
  • Sold between 10 000 and 50 000 dollars
  • Has been a member for 1-2 years
  • Exclusive Author
  • Bought between 1 and 9 items
  • Referred between 1 and 9 users
DistinctiveThemes says

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

1674 posts Multimedia Artistry
  • Author had a Free File of the Month
  • Has been a member for 3-4 years
  • Referred between 100 and 199 users
  • Bought between 10 and 49 items
  • Exclusive Author
  • Most Wanted Bounty Winner
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
dnp_theme says

Starred :)

35 posts
  • Exclusive Author
  • Bought between 1 and 9 items
  • Has been a member for 0-1 years
  • Referred between 1 and 9 users
  • Sold between 5 000 and 10 000 dollars
RepublikWP says

Noted. Thanks!

by
by
by
by
by
by