About

A collection of simple jQuery image slideshow plugins, with different modules for different effects.

How To Use

Zip Download

First, include the jQuery, JS, and CSS in your page. You should load the JS at the bottom of the body, so it doesn't block content rendering, the CSS should be included in the head. The CSS can be modified as you like, it is simply used to set opacity of all slides to 0 and to make the images fit in the slider, which should be positioned relatively and given a set size. The slider doesn't just work with img tags, so feel free to play around with it.

<style>
  .slider > img{
    position:absolute;
    width:100%;
    opacity:0;
  }
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
<script type="text/javascript" src="sliders/scripts/fusebox1.min.js"></script>

You must also include the JS plugin file you are using after the jQuery file. All the plugin files are named for the functions in them, e.g. the .slider() function is in the slider.min.js file.

<script type="text/javascript" src="sliders/scripts/sliderLeft.min.js"></script>
<script>
  $(document).ready(function(){
    $('#slider').sliderLeft();
  });
</script>

Examples

Basic slider usage.
A number can be passed into the slider function to set the number of milliseconds delay inbetween slide changes, default is 3000.

Code:

<div class="slider" id="slider1">
  <img src="images/1.png">
  <img src="images/2.png">
  <img src="images/3.png">
</div>
<script type="text/javascript" src="sliders/scripts/slider.min.js"></script>
<script>
  $(document).ready(function(){
    $('#slider1').slider();
  });
</script>

Example:

---

Slider with slide in effect.
Two optional inputs:

1. A string can be passed into the function to set the number of
   
2. A number can be passed into the function to set the number of milliseconds delay inbetween slide changes, default is 3000.
   

Both inputs are used in the example.

Note: you may want to set overflow:hidden on the slider, to avoid the slides from starting visibly outside of the slider.

Code:

<div class="slider" id="slider2" style="overflow:hidden;">
  <img src="images/1.png">
  <img src="images/2.png">
  <img src="images/3.png">
</div>
<script type="text/javascript" src="sliders/scripts/sliderLeft.min.js"></script>
<script>
  $(document).ready(function(){
    $('#slider2').sliderLeft('20px', 1500);
  });
</script>

Example:

---

Slider with no animation.
A number can be passed into the slider function to set the number of milliseconds delay inbetween slide changes, default is 3000.

Code:

<div class="slider" id="slider3">
  <img src="images/1.png">
  <img src="images/2.png">
  <img src="images/3.png">
</div>
<script type="text/javascript" src="scripts/sliderNoAnim.min.js"></script>
<script>
  $(document).ready(function(){
    $('#slider3').sliderNoAnim();
  });
</script>

Example:

---

A slider with buttons to activate the slide changes.
It returns an object with two functions, forward and backward, a forwards function and a backwards function, that you can use to move forward or backward in the slide rotation on an event binding.

Code:

<div class="slider" id="slider4">
  <img src="images/1.png">
  <img src="images/2.png">
  <img src="images/3.png">
</div>
<div id="backwards" style="float:left;">Backwards</div>
<div id="forwards" style="float:right;">Forwards</div>
<div style="clear:both;"></div>
<script type="text/javascript" src="scripts/slider.min.js"></script>
<script>
  $(document).ready(function(){
    var slider = $('#slider4').sliderArrows();
    $('#forwards').click(slider.forward);
    $('#backwards').click(slider.backward);
  });
</script>

Example:

---

License

These plugins are not licensed. Use it as you will. Please don't claim my work as your own unless you modify it, but feel free to use it however you like.