2 jquery plugins on one html page

2 jquery plugins on one html page

Greetings -

Very little jquery experience. Trying to use two different jquery plugins on the same page (labeled 'Slider' + 'Carousel'). They work fine individually, but not together.

Can you take a look at the code and/or test link below, and let me know how to resolve. Thanks.



  1. <!-- Slider -->
    <script type="text/javascript">
        $(document).ready(function() {
            var slider = $('#slider').leanSlider({
                directionNav: '#slider-direction-nav',
                controlNav: '#slider-control-nav'
            });
        });
        </script>
    <!-- Slider -->




    <!-- Carousel -->
    <script type="text/javascript">

    var tpj=jQuery;
    tpj.noConflict();

    tpj(document).ready(function() {

    if (tpj.fn.cssOriginal!=undefined)
    tpj.fn.css = tpj.fn.cssOriginal;

    tpj('#services-example-1').services(
    {
    width:904,
    height:305,
    slideAmount:4,
    slideSpacing:30,
    carousel:"on",
    touchenabled:"off",
    mouseWheel:"off",
    hoverAlpha:"off", // Turns Alpha Fade on/off by Hovering
    slideshow:0, // 0 = No SlideShow, 1000 = 1 sec Slideshow (rotating automatically)
    hovereffect:"off", // All Hovereffect on/off
    callBack:function() { } //Callback any Function after loaded

    });
    });
    </script>
    <!-- Carousel -->