N3std Multi-Slider
DEMO – The first 3 slides are included in the n3std Multi-Slider
Aditional Slides! – Get 20 aditional multi sliding layouts here.
The n3std Multi-Slider is a jQuery Plug-in that turns an unordered HTML list into a full width scene slider with nested image slides.
How It Works
Say you set your slider to be 940×320. On the left side you have an H1, h3 and an unordered list touting your web design genius. Directly to the left are 3 screen shots of your best work. As you read through your content, the 3 images on the left start sliding within themselves, each revealing a new screen shot. Nice! Now that you’ve finished reading the content and have seen 6 great moving images, the main scene slides completely off the page and is replaced by a whole new scene, and the cycle continues.
Set Up
Copy and paste the css, js and image folders into the root of your project. Then copy and paste the css and js links into the <head> of your document. Finally, copy and paste the <div id=”tree”> and all its contents into the body of your document. You now have a working slider with nested sliding images!
Layouts and Alignment
There are 3 standard slide layouts to choose from
- <li class=”slideA”> text area and 1 large sliding image.
- <li class=”slideB”> text area, 1 small sliding image, 1 large sliding image
- <li class=”slideC”> text area, 2 small sliding images, 1 medium sliding image
- There are 20 additional layouts available at n3std.com
Each layout can be aligned left or right
- <li class=”slideA left”>
- <li class=”slideB right”>
Customize Your Content
Chose the slides you want to use. Copy and paste them in the order you want them to appear. Edit the text and images provided and you are done! Caution, if you use the same slide layout more than once, you will need to duplicate the images and update the image links as needed.
Viewing Time, Transition Speed and Easing
The slider speed, viewing time and easing options are set up to my liking but you may have a different idea. You can edit all that fun stuff in the <head>
<script type="text/javascript">
$(document).ready(function(){
$(window).n3std({
minWidth: 960, // min slider width
height : 320, // slide height
slideView : 6000, // main slide viewing time
slideTrans : 2000, // main slide transition time
slideEasing : ‘easeInOutBack’, // main slide easing
innerTrigger: 3000, // inner slide trigger time
innerDomino : 200, // Time Between Inner slide domino
innerTrans : 500, // inner slide transition time
innerEasing : ‘easeInOutQuad’ // main slide easing
});
})
</script>