I was looking for a simple Jquery DIV slider the other day and took a while before I found anything but they were too heavy and clunky. I just decided the best way was to write my own. It's not super customizable but it's light and easy to configure. You can slide DIVs or Images or a combination of both.
The script will allow you to set the slide speed, show navigation buttons and/or stop the slide on hover. Just some basics which makes it nice and light.
The reason for Div usage is that some people, like myself may want to slide text and other elements rather than just images.
Here is a sample of the script sliding through four images:
Give Me the Script Now
Ok, now that you've seen the script you probably want to get it yourself and try it out. Of course. First of all you need to include
Jquery in your script.
Download
Just the Javascript - crank-slider.min.js
Full Demo - Images/Javascript/HTML
Step 1 - Attach Javscript
So the first step is to include the Jquery and crankSlider code in the header:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="crank-slider/crank-slider.min.js" >
Step 2 - Initiate Script
To initiate the slider you also have to include this code after you've attached the javascripts:
<script type="text/javascript">
$(window).load(function() {
$('#slider').crankSlider({
slideTimer: 8000, //Time Per Slide Animation (In thousands of seconds 8000 = 8 seconds)
slideWidth: 620, //Individual Slide Width (The width of each slide)
showNav: 1, //Show Nav Buttons Under Slides
hoverStop: 1, //Stop Slideshow on Hover over
});
});
</script>
In the above code there are four customizable variables: slideTimer, slideWidth, showNav and hoverStop. The most crucial one that you must change is the slideWidth. Change the number to the width of each slide (your image and div slides should be the same size).
Step 4 - The CSS
Now you need the CSS code to control the look of your slide show:
#slider { width: 620px; height: 354px; position: relative; margin: 50px auto 0px; overflow: hidden; }
.sliderStrip_wrap { height: 354px; float: left; }
.sliderStrip { height: 354px; float: left; }
.slide { display: block; float: left; }
.slider_nav { width: 620px; text-align: center; margin: 5px auto; padding: 0px; }
.slider_nav li { list-style: none; display: inline; margin: 0px 5px; padding: 0px; }
.slider_nav li a { font-size: 28px; font-weight: bold; text-decoration: none; color: #b2b2b2; margin: 0px; padding: 0px; }
.slider_nav li a.active { color: #000; }
The only thing you need to edit is the width and height of each item. It should be pretty intuitive. If you want to change the color of the nav buttons, it's the color attribute of
.slider_nav li a and
.slider_nav li a.active.
Step 5 - Last Step
The only thing left is to place the image or divs in place. Here's the sample code of the exact one you see above here. The one below has a mixture of divs and images. The way to make it work is to add the class
slide to each slide you have.
<div id="slider">
<div class="sliderStrip_wrap">
<div class="sliderStrip" id="sliderStrip_1">
<a href="#" target="_blank"><img src="crank-slider/image/slider-1.jpg" class="slide" /></a>
<a href="#" target="_blank"><img src="crank-slider/image/slider-2.jpg" class="slide" /></a>
<a href="#" target="_blank"><img src="crank-slider/image/slider-3.jpg" class="slide" /></a>
<a href="#" target="_blank"><img src="crank-slider/image/slider-4.jpg" class="slide" /></a>
</div>
</div>
</div>
Div and Image mixture sample:
<div id="slider">
<div class="sliderStrip_wrap">
<div class="sliderStrip" id="sliderStrip_1">
<a href="#" target="_blank"><img src="crank-slider/image/slider-1.jpg" class="slide" /></a>
<div class="slide"><img src="crank-slider/image/slider-2.jpg" /><div>
<a href="#" target="_blank"><img src="crank-slider/image/slider-3.jpg" class="slide" /></a>
<div class="slide">Some Text Here<div>
</div>
</div>
</div>
