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.

281 posts powerthemes.club
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Has been part of the Envato Community for over 5 years
  • Sells items exclusively on Envato Market
+4 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
257 posts
  • Sells items exclusively on Envato Market
  • Has sold $10,000+ on Envato Market
  • Has been part of the Envato Community for over 1 year
  • Contributed a blog post
+3 more
DistinctiveThemes says

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

1775 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
  • Sells items exclusively on Envato Market
  • Has sold $10,000+ on Envato Market
  • Has collected 1+ items on Envato Market
+1 more
RepublikWP says

Noted. Thanks!

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by