Flow Slider (INCOMPLETE)
A SIMPLE slider script.
by Travis
HTML
<div id="flow">
<div class="slide">
<img src="http://farm8.staticflickr.com/7069/6911161056_6e3056a941.jpg" />
<div class="story">
<h1>Slide Three</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae odio enim. Maecenas quis vehicula quam. Proin mollis nunc ac lacus tincidunt volutpat.</p>
<a href="#"></a>
</div>
</div>
<div class="slide">
<img src="http://farm8.staticflickr.com/7226/7057245065_6a399e4266.jpg" />
<div class="story">
<h1>Slide Three</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae odio enim. Maecenas quis vehicula quam. Proin mollis nunc ac lacus tincidunt volutpat.</p>
<a href="#"></a>
</div>
</div>
<div class="slide">
<img src="http://farm6.staticflickr.com/5200/6911159272_31fc88db17.jpg" />
<div class="story">
<h1>Slide Three</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae odio enim. Maecenas quis vehicula quam. Proin mollis nunc ac lacus tincidunt volutpat.</p>
<a href="#"></a>
</div>
</div>
</div>
CSS
body {font-size:14px;}
h1 {font-size:2em;}
#flow {position:relative;}
.slide {position:absolute; top:0; left:0;}
.story {width:50%; height:241px; padding:20px; background:#eee; position:absolute; top:0; right:0;}
JavaScript
jQuery.fn.flow = function() {
slides = $('#flow').children();
};
$(function(){
$('#flow').flow();
console.log(slides.size());
});