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>
Different jQuery plugins may conflict working together, e.g. bootstrap and jCarouselLite, while standalone version works fine
^
|
fiddle