CODEWITHSUNDEEP
javascript
user1096057
user1096057

Reputation: 2423

Object #<Object> has no method 'carouFredSel'

I have implemented an infinite carousel that was working but I am now getting the following error message

Object # has no method 'carouFredSel'

I had edited some code for the menu that is now working but perhaps there is a conflict between the two scripts?

http://www.ogormanconstruction.co.uk/basingstoke-treatment-works

Javascript:

<script type="text/javascript">
jQuery(document).ready(function() {
    var imgLength = jQuery('ul#fredsel img').length;
    jQuery('#totalImg').html(imgLength);
    jQuery('#imgCount').html(1);

    // Using custom configuration
    // Using custom configuration
    jQuery("#fredsel").carouFredSel({
        items: 1,
        align: false,
        auto: false,
        width: 1500,
        scroll : {
            items           : 1,
            duration        : 1000,
            pauseDuration   : 2000
        },
        prev: {
            button : "a.prev-slide",
            onBefore : function() { 
                var theCount = parseInt(jQuery('#imgCount').html());
                if (theCount === 1){
                    var theLength = jQuery('ul#fredsel img').length;
                    jQuery('#imgCount').html(theLength);
                } else {
                   jQuery('#imgCount').html(theCount-1);
               };
          },
       },
       next: { 
           button : "a.next-slide",
           onBefore : function() { 
               var theLength = jQuery('ul#fredsel img').length;
               var theCount = parseInt(jQuery('#imgCount').html());
               if (theCount === theLength){
                   jQuery('#imgCount').html(1);
               } else {
                   jQuery('#imgCount').html(theCount+1);
               };
           },
        }
    })
    .find("li").click(function() {
        jQuery("#fredsel").trigger("slideTo", [jQuery(this)]);
    }).css("cursor", "pointer")

});

</script>

CSS:

<div class="infinite-carousel">
    <ul id="fredsel">
        <li style="width: 600px"><img src="/wp-content/themes/child/images/basingstoke/basingstoke-1.png"></li>
        <li style="width: 600px"><img src="/wp-content/themes/child/images/basingstoke/basingstoke-2.png"></li>
        <li style="width: 600px"><img src="/wp-content/themes/child/images/basingstoke/basingstoke-3.png"></li>
        <li style="width: 600px"><img src="/wp-content/themes/child/images/basingstoke/basingstoke-4.png"></li>
        <li style="width: 600px"><img src="/wp-content/themes/child/images/basingstoke/basingstoke-5.png"></li>
        <li style="width: 600px"><img src="/wp-content/themes/child/images/basingstoke/basingstoke-6.png"></li>
        <li style="width: 600px"><img src="/wp-content/themes/child/images/basingstoke/basingstoke-7.png"></li>
    </ul>
</div>

<div class="controls">
    <a href="#" class="prev-slide"></a>
    <a href="#" class="next-slide"></a>
</div>

Upvotes: 1

Views: 3410

Answers (1)

JaredMcAteer
JaredMcAteer

Reputation: 22535

It appears you're adding jQuery (as well as other scripts) multiple times, the carouFredSel gets overridden.

Upvotes: 5

Related Questions