Frequently Asked Questions

Bug Fixes

The slider is broken; animations are going completely haywire.

Remove all styles from the slides and slider wrapper elements (The elements with "bbslider-wrapper" and "panel" classes). Pay special attention to the position, margin, and padding properties; margin and padding should be zero, and you should not touch position unless you know what you're doing. For an easier time, wrap your slide content in a third level wrapper and style that instead.

The slider is cut off or completely gone.

Make sure the slider has the correct width and height. Did you turn off autoHeight and forget to give it a height? If you have content that is not fully loaded when the slider is initiated, like images, autoHeight will get a weird value. Also check the width; the overflow property sometimes shrink-wraps the content.

Nothing is happening.

Did you include jQuery, jquery.bbslider.min.js and jquery.bbslider.css? By default, the slider doesn't have any functionality. You need to add controls or create your own functions to navigate it.

The controls are not showing.

Note about controls:

  • The controls are hidden until you hover over them.
  • The previous control doesn't show on the first panel and next doesn't show on the last panel if loop is false.
  • The next control is 50px from the right of the slider. Without a width on the slider, it's going to be 100% of its container.

Code

How do I strip it down to the bare bones?

Short version: turn off autoHeight and leave the rest default. Long version:

  • onDemand: false
  • controls: false
  • autoHeight: false
  • pager: false
  • pageInfo: false

Note: Turning off autoHeight will require you to set your own height.

General

Why is this called bare bones slider?

By default, there is very little code added. You can use different options to create pre-built controls or use your own functions to navigate the slider. This allows the developer to spend more time building functionality instead of trying to undo most of the defaults.

What content can be put into the slider?

Anything. If you can put it in HTML, you can put it in the slider.

What structure does the slider have to be in?

Anything should work as long as it has a parent-child relationship. However, all my testing was using div tags so that would be your safest bet.

I have a bug report/question/suggestion/comment.

https://github.com/Richard1320/Bare-Bones-Slider/tags.