Click here to Skip to main content
15,867,686 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello folks.
I am trying to add multiple image slideshow(known as 'carousel') to a html page. I looked into adding actual pre made carousels but I thought the code was overkill in most when I knew you could use localScroll to anchors for the same effect with minimal code.
So I managed to get one slideshow in full working order using localScroll(slideshow is controlled by pagination buttons) upon adding a second slideshow to html I ran into difficulties. Basically I thought by duplicating the slideshow code block it would work independently.....ofcourse that would be to easy;) (It didn't) Here's what happens....
'Slideshow one' works perfectly....but
'Slideshow two' doesn't work on itself but instead controls 'slideshow one'?!?

I hope there is a simple solution to this, as in some code alteration to target all individual slideshows - this I'm not sure how to do.
Any help appreciated.
Many Thanks

XML
<script type="text/javascript">

jQuery(function( $ ){
$.localScroll.defaults.axis = 'xy';

$.localScroll({
//$('#content').localScroll()
target: '#content', // could be a selector or a jQuery object too.
queue:true,
duration:1500,
hash:false,
easing:'easeOutQuart',
onBefore:function( e, anchor, $target ){
// The 'this' is the settings object, can be modified
},
onAfter:function( anchor, settings ){
// The 'this' contains the scrolled element (#content)
}
});
});

</script>


XML
<div id="box1">

<div id="numbers">
<a href="#one" class="numb">1</a>
<a href="#two" class="numb">2</a>
<a href="#three" class="numb">3</a>
<a href="#four" class="numb">4</a>
</div>

<div id="content">

<div id="slide">
<a name="one"><div id=""><img src="images/1.jpg" width="568" height="457"/></a></div>
<a name="two"><div id=""><img src="images/2.jpg" width="568" height="457"/></a></div>
<a name="three"><div id=""><img src="images/3.jpg" width="568" height="457"/></a></div>
<a name="four"><div id=""><img src="images/4.jpg" width="568" height="457"/></a></div>
</div>

</div>

</div>
Posted
Updated 4-Oct-11 13:04pm
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900