# SLIDER REVOLUTION - The Responsive Slider Plugin

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18

- Transparent Background
- Colored Background
- Covering Left Top Aligned Image
- Covering Center Center Aligned Image
- Covering Right Bottom Aligned Image
- Containing Center Center Aligned Image
- Containing Right Bottom Aligned Image
- Repeating Background

## Different Backgrounds

You can set the Main Background transparent, Colored, or via an image source. Change the Image aligns, cover/contain/normal fillings and Repeating via the data options

### Transparent Background

    		<li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
    			<!-- MAIN IMAGE -->
    			<img src="images/transparent.png"   alt="slidebg1"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
    			...

### Colored Background

    		<li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
    			<!-- MAIN IMAGE -->
    			<img src="images/transparent.png" style="background-color:#ff0000" alt="slidebg1"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
    			...

### Aligned Covering Background

    		<li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
    			<!-- MAIN IMAGE -->
    			<img src="images/someimage.png" alt="slidebg1"  data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
    			...

### Aligned Containing Background

    		<li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
    			<!-- MAIN IMAGE -->
    			<img src="images/someimage.png" alt="slidebg1"  data-bgfit="contain" data-bgposition="center center" data-bgrepeat="no-repeat">
    			...

### Repeated Background

    		<li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
    			<!-- MAIN IMAGE -->
    			<img src="images/tiledimage.png" alt="slidebg1"  data-bgfit="normal" data-bgposition="top left" data-bgrepeat="repeat">
    			...