2

I was using this code earlier in my test page and it worked perfectly,

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="jQuery/jquery-1.11.0.js"></script>
<script src="jQuery/jcarousellite_1.0.1.min.js"></script>

<script>
    $(function () {
        var myCounter = $('li').length;
        $(".nonCircular .carousel").jCarouselLite({
            btnNext: ".next",
            visible: 1,
            circular: false
        });
        var counter = 0;
        $('.next').on('click', function () {
            counter = counter + 1;
            if (counter == myCounter)
                window.location.href('Fraga.aspx');
        });
    });
</script>

But when I copy and pasted the code to the final page it keeps throwing this error..

JavaScript runtime error: Object doesn't support property or method 'jCarouselLite'

I had this error earlier on with another plugin, but that was because I had forgotten to add a part, but this is the exact code from the testing page, and I put the scripts in the same area, so it should work when I copied and pasted the code over. But it isn't.

Here is my markup...

<div class="nonCircular">
     <div class="carousel">
         <ul>
              <li><img src="images/1.png" height="400" alt=""></li>
              <li><img src="images/2.png" width="600" height="400" alt=""></li>
              <li><img src="images/3.png" width="600" height="400" alt=""></li>
              <li><img src="images/4.png" width="600" height="400" alt=""></li>
         </ul>
     </div>
 </div>

and here is my .next markup

<div style="width:50px; height:50px; background:#f00;" class="next"></div>
Chris
  • 2,953
  • 10
  • 48
  • 118
  • it's not a solution, but why do you include jquery 1.10.2 and 1.11.0 at the same time? and paste you html, plz – vladkras Jan 31 '14 at 05:42
  • That's a good question, I think it was in case I didn't have access to the internet, so I added it in there as a failsafe. – Chris Jan 31 '14 at 05:48
  • you'd better use only one of them. stored on your server, if you are not sure in your internet connection – vladkras Jan 31 '14 at 06:09
  • are you sure you didn't forget to copy jcarousellite_1.0.1.min.js to your server? – vladkras Jan 31 '14 at 06:12
  • I'm still relatively new with jQuery, so I'm going to keep your suggestion in mind. As for my question, any idea why it would work in one project and not in another? – Chris Jan 31 '14 at 06:14
  • Yes, I added it to the project – Chris Jan 31 '14 at 06:15
  • and can you open it by clicking the direct link in code `www.your-site.com/jQuery/jcarousellite_1.0.1.min.js`? – vladkras Jan 31 '14 at 06:17
  • Yes, I'm doing it locally. Its on my laptop and in my project. – Chris Jan 31 '14 at 06:20
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/46489/discussion-between-vladkras-and-user2970223) – vladkras Jan 31 '14 at 06:36

1 Answers1

2

Different jQuery plugins may conflict working together, e.g. bootstrap and jCarouselLite, while standalone version works fine

  ^
  |
fiddle
vladkras
  • 16,483
  • 4
  • 45
  • 55