Question

I am a huge novice at web development so bear with me if this is a very trivial problem. I am trying to incorporate JCorouselLite into my website to display some content. (Link to Developers site)

I am following the instructions given on the site above:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jcarousellite.js"></script>
<button class="prev"><<</button>
<div>
  <ul>
     <li>Test</li>
     <li>Test</li>
     <li>Test</li>
     <li>Test</li>
     <li>Test</li>
     <li>Test</li>
     <li>Test</li>
     <li>Test</li>
  </ul>
</div>
<button class="next">>></button>
<script type="text/javascript">
   $(".default .jCarouselLite").jCarouselLite({
        btnNext: ".default .next",
        btnPrev: ".default .prev"
   });   
</script>

Which from the instructions should work. I got both jquery.js and jcarousellite.js from the site and put them both in a folder called ‘js’ which is in the root of my website. Can anybody see where I am going wrong? It doesn’t seem to be importing the 2 scripts correctly.

Answer 1

Is the page where you’re doing the Carousel in the root too? or are you down a level say ‘/Carousel’ if so you’ll need to change the src to

src="../js/jcarousellite.js"

make these changes:

<div class="jCarouselLite">
  <ul>
     <li>Test</li>
     <li>Test</li>
     <li>Test</li>
     <li>Test</li>
     <li>Test</li>
     <li>Test</li>
     <li>Test</li>
     <li>Test</li>
  </ul>
</div>
<button class="next">>></button>
<script type="text/javascript">
   $(".jCarouselLite").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev"
   });   
</script>

You were calling the jquery right. But not applying it to any div.