Libraries

To setup BeaverSlider onto your page you need to perform the next steps.

If you did not use jQuery on your web page before you need to include it to the <head> section. Here we use the link from jQuery CDN, but also you have a local copy on your web server. You can download the latest version on the official web site.

HTML
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

Include beaverslider.js. Put it to the folder where you store your JavaScript files and make a reference to the file in the end of HTML <body> section.

HTML
<script src=".../beaverslider.js"></script>

If you use our pre-defined effects you should also include them.

HTML
<script src=".../beaverslider-effects.js"></script>

Hosted libraries

You can use our CDN as well: just put the proper version. For example, if you want to include version 2.0.1 use this code:

HTML
<script src="http://beaverslider.com/code/2.0.1/beaverslider.js"></script>
<script src="http://beaverslider.com/code/2.0.1/beaverslider-effects.js"></script>

Or use the current version (not recommended for long-term use because some methods/attributes could be deprecated):

HTML
<script src="http://beaverslider.com/code/current/beaverslider.js"></script>
<script src="http://beaverslider.com/code/current/beaverslider-effects.js"></script>

The list of available versions you can find in the change logs. Also you can find in this folder demo.css which is actual for the demo pages.

HTML
<link rel="stylesheet" type="text/css" src="http://beaverslider.com/code/2.0.1/demo.css"/>

Images

Prepare the pictures you are going to show in slider.

Hint: the pictures should have the same palette as your web page has to be looking good together. After you've set up the slider, please, check the pictures if they are fitting to each other and you have a good solid set. These points are really important to have a harmonious design which looks simple to the eye.

Important: make sure all the pictures you will use in slider have exactly the same size to each other and to the container! BeaverSlider does not support the pictures of the different size: it never looks good in reality. All we could do - with types "carousel" and "slider" it works for all effects without stretching/narrowing images, but with "zoomer" images with different size are not supported.

Running

Well, preparation is done. Now the only thing to do is to create a slider by creating an object of class BeaverSlider with passing the settings needed.

HTML
<script>
      
  var mySlider = new BeaverSlider({...});
    
</script>