Question

I’m implementing a jquery simple-carousel in my local and test environments and it works perfectly, but once I move it into my production environment it throws a console error. The script can be found here.

This is the error I’m receiving:

TypeError: $(“ul.carousel”).simplecarousel is not a function

I’ve been looking around and can’t find anything pertaining to this issue except an older post here that doesn’t help. I’m using a very basic implementation as seen here

Any help would be greatly appreciated. I’ve tried about 4 different slider packages to no avail. I keep receiving similar errors.

Here’s my code:

    <style>
    ul.carousel {padding:0;margin:0;}
    #carousel-wrap {width:790px;height:565px;}
    #carousel-wrap span.next {
        position:absolute;
        top:15%;
        right:170px;
        z-index:999;
        width: 28px;
        height: 80px;
        text-indent: -999999px;
        background: url(http://www.3balls.com/images/homepage/ed_next.png) no-repeat 4px 0px;
        cursor:pointer;
    }
    #carousel-wrap span.prev {
        position:absolute;
        top:15%;
        left:0;
        z-index:999;
        width: 28px;
        height: 80px;
        text-indent: -999999px;
        background: url(http://www.3balls.com/images/homepage/ed_prev.png) no-repeat -4px 0px;
        cursor:pointer;
    }
    </style>


    <script type="text/javascript">
        jQuery(document).ready(function() {
            $("ul.carousel").simplecarousel({
                width:790,
                height:565,     
                auto: 4000,
                next: $('.next'),
                prev: $('.prev')
            });
        });    
    </script>

    <div id="carousel-wrap">
    <ul class="carousel">
      <li><img src="http://www.3balls.com/images/homepage/ads/ad_fallingprices.png" alt="Main Feature" usemap="#Map6" border="0" /></li>
      <li><img src="http://www.3balls.com/images/homepage/ads/ad_fallingprices.png" alt="Main Feature" usemap="#Map5" border="0" /></li>
      <li><img src="http://www.3balls.com/images/homepage/ads/ad_fallingprices.png" alt="Main Feature" usemap="#Map4" border="0" /></li>
    </ul>
    <span class="prev">prev</span>
    <span class="next">next</span> 
    </div>

Answer 1

try this:

<script type="text/javascript">
    var $jq = jQuery.noConflict();
    $jq(document).ready(function() {
        $jq("ul.carousel").simplecarousel({
            width:790,
            height:565,     
            auto: 4000,
            next: $jq('.next'),
            prev: $jq('.prev')
        });
    });    
</script>