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
<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>
<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>