pbul2004
New Member
Hi,
Just wondering if any of the above jquery can be used on the same page? I am try to use jcarousel and the easyslider on the same page but it wont work, if i comment out one or the other they are working fine on their own, but i need them to work at same time? Is this possible?
Script
CSS
Easy Slider HTML
Hope you can help us
Cheers
Just wondering if any of the above jquery can be used on the same page? I am try to use jcarousel and the easyslider on the same page but it wont work, if i comment out one or the other they are working fine on their own, but i need them to work at same time? Is this possible?
Script
HTML:
<!-- jcarousel -->
<script type="text/javascript" src="js/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.pack.js"></script>
<!-- easyslider 1.5 -->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/easySlider1.5.js" type="text/javascript"></script>
CSS
HTML:
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />
<link rel="stylesheet" type="text/css" href="js/jquery.jcarousel.css" />
HTML:
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
$("#slider").easySlider({
controlsBefore: '<p id="controls">',
controlsAfter: '</p>',
auto: true,
continuous: true
});
$("#slider2").easySlider({
controlsBefore: '<p id="controls2">',
controlsAfter: '</p>',
prevId: 'prevBtn2',
nextId: 'nextBtn2'
});
});
/* ]]> */
</script>
<script type="text/javascript">
function mycarousel_initCallback(carousel)
{
// Disable autoscrolling if the user clicks the prev or next button.
carousel.buttonNext.bind('click', function() {
carousel.startAuto(0);
});
carousel.buttonPrev.bind('click', function() {
carousel.startAuto(0);
});
// Pause autoscrolling if the user moves with the cursor over the clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
auto: 3,
wrap: 'last',
initCallback: mycarousel_initCallback
});
});
</script>
Easy Slider HTML
HTML:
<div id="sliderWrapper">
<div id="slider">
<ul>
<li><a href="#"><img alt="1" src="images/test.png"/></a></li>
<li><a href="#"><img alt="2" src="images/test.png"/></a></li>
<li><a href="#"><img alt="3" src="images/test.png"/></a></li>
<li><a href="#"><img alt="4" src="images/test.png"/></a></li>
<li><a href="#"><img alt="5" src="images/test.png"/></a></li>
</ul>
</div>
</div>
HTML:
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><a href="#"><img src="images/portfolio/sites/muckypaws.jpg" width="200" height="170" alt="" /></a></li>
<li><a href="#"><img src="images/portfolio/sites/muckypaws.jpg" width="200" height="170" alt="" /></a></li>
<li><a href="#"><img src="images/portfolio/sites/muckypaws.jpg" width="200" height="170" alt="" /></a></li>
<li><a href="#"><img src="images/portfolio/sites/muckypaws.jpg" width="200" height="170" alt="" /></a></li>
<li><a href="#"><img src="images/portfolio/sites/muckypaws.jpg" width="200" height="170" alt="" /></a></li>
<li><a href="#"><img src="images/portfolio/sites/muckypaws.jpg" width="200" height="170" alt="" /></a></li>
</ul>
Hope you can help us
Cheers