Rockstar Slider
Super lightweight and touch-enabled slider.
Demo
Responsive
The slider has the ability to simply take the width and height of it's parent element. Which means that if your side is fluid and responsive, the slider will be fluid well.
Natural Animations
The script has features like speed detection and inertia to make it move as naturally as possible. It shines on touchscreen devices, and looks just as cool when you use a mouse.
Easy to Use
You don't have to include a CSS file, or write any JavaScript code. You just write really simple HTML code, include the .js file and you are good to go. As simple as it gets!
More Features
Images - Fit or Fill
You don't need to have images with exactly the same size as the slider. No matter what proportion or size the images are, they will always fill the slide if you use the "fill" class. Alternatively, you can use the "fit" class if you want the image to fit inside the slide, not loosing a pixel.
Lightweight
Rockstar Slider is as lightweight as it gets. The JavaScript file is only 7kb in size and there is no CSS file!
Examples
Default: 100% parent width, 400px height
Code:
<div class="rockstar-slider with-pager" style="height: 400px;">
<div> <img src="products/rockstar-slider-jquery-touch-slidergallery/img/1.png" class="fill"> </div>
<div> <img src="products/rockstar-slider-jquery-touch-slidergallery/img/2.png" class="fill"> </div>
<div> <img src="products/rockstar-slider-jquery-touch-slidergallery/img/3.png" class="fill"> </div>
<div> <img src="products/rockstar-slider-jquery-touch-slidergallery/img/4.png" class="fill"> </div>
</div>
Fixed size 590x300
Code:
<div class="rockstar-slider with-pager" style="width: 590px; height: 300px;">
<div> <img src="products/rockstar-slider-jquery-touch-slidergallery/img/1.png" class="fill"> </div>
<div> <img src="products/rockstar-slider-jquery-touch-slidergallery/img/2.png" class="fill"> </div>
<div> <img src="products/rockstar-slider-jquery-touch-slidergallery/img/3.png" class="fill"> </div>
<div> <img src="products/rockstar-slider-jquery-touch-slidergallery/img/4.png" class="fill"> </div>
</div>
Fluid size 50% parent
Code:
<div class="rockstar-slider with-pager" style="width: 50%;">
<div> <img src="products/rockstar-slider-jquery-touch-slidergallery/img/1.png" class="fill"> </div>
<div> <img src="products/rockstar-slider-jquery-touch-slidergallery/img/2.png" class="fill"> </div>
<div> <img src="products/rockstar-slider-jquery-touch-slidergallery/img/3.png" class="fill"> </div>
<div> <img src="products/rockstar-slider-jquery-touch-slidergallery/img/4.png" class="fill"> </div>
</div>
Same images, but tall slider (images always fill the slides)
Code:
<div class="rockstar-slider with-pager" style="width: 350px; height: 600px;">
<div> <img src="products/rockstar-slider-jquery-touch-slidergallery/img/1.png" class="fill"> </div>
<div> <img src="products/rockstar-slider-jquery-touch-slidergallery/img/2.png" class="fill"> </div>
<div> <img src="products/rockstar-slider-jquery-touch-slidergallery/img/3.png" class="fill"> </div>
<div> <img src="products/rockstar-slider-jquery-touch-slidergallery/img/4.png" class="fill"> </div>
</div>
Fluid size full page width, 600px height