Hopefully Quick Fix with Cycle Plugin
I'm attempting to make a scrolling slide with navigation. I've figured everything out except for how to get the prev/next buttons to show. I'm trying to use this:
http://jquery.malsup.com/cycle/scrollhv.html, but I can't figure how where to add it in my code.
Here's a preview of what I have so far: http://christi14.blogspot.com/
<!doctype html>
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'scrollHorz' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});});
</script>
<div class="slideshow">
<a href="http://www.lauracandler.com/books/mmfacts.php" target="_blank"><img src="http://www.lauracandler.com/images/mmfacts_blog.jpg" /></a>
<a href="http://www.lauracandler.com/books/dailymathpuz.php"target="_blank"><img src="http://www.lauracandler.com/images/dmpc_blog.jpg" /></a>
</div>
</!doctype>
Where do I add this piece:
Here's a preview of what I have so far: http://christi14.blogspot.com/
<!doctype html>
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'scrollHorz' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});});
</script>
<div class="slideshow">
<a href="http://www.lauracandler.com/books/mmfacts.php" target="_blank"><img src="http://www.lauracandler.com/images/mmfacts_blog.jpg" /></a>
<a href="http://www.lauracandler.com/books/dailymathpuz.php"target="_blank"><img src="http://www.lauracandler.com/images/dmpc_blog.jpg" /></a>
</div>
</!doctype>
Where do I add this piece:
$('#s1').cycle({
fx: 'scrollHorz',
prev: '#prev1',
next: '#next1',
timeout: 0
});
Thanks!