[Eskymo]

I found this - jCarousel Lite and I want to use the 'Auto Scroll' version of this but can't get it working.

I've downloaded the relevant jquery files into a js folder and have inserted this lot into the head of my html file:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jcarousellite.js"></script>
<script type="text/javascript" src="js/easing.js"></script>

I've then added my list of items:

div id="carousel">
   <ul>
        <li><a href="http://www.financialplanning.org.uk/directory/united-kingdom/london-city/london/duncan-glassey" title="CFP - We hold the globally recognised standard of excellence" target="_blank" id="btn-cfp"></a></li>
	<li><a href="http://www.sifa-centre.info/search/firm_individuals.asp?reference=4408" title="We are members of SIFA" target="_blank" id="btn-sifa"></a></li>
	<li><a href="http://www.apil.org.uk/" title="1st tier expert in financial planning" target="_blank" id="btn-apil"></a></li>
	<li><a href="http://www.fpanet.org/professionals/Connect/CommunitiesofInterest/InternationalCommunity/" title="Members of International FPA Community" target="_blank" id="btn-fpa"></a></li>		
	<li><a href="#" title="New Model Adviser® awards 2012 - Finalist: Best IFA Firm (Scotland and Northern Ireland)" target="_blank" id="btn-nma"></a></li>	
	<li><a href="#" title="The Personal Finance Society - The professional body for the financial planning profession in the UK" target="_blank" id="btn-pfs"></a></li>		
   </ul>
</div>

then added the auto scroll bit of code supplied:

<script type="text/javascript">
	$(function() {
		$(".auto .jCarouselLite").jCarouselLite({
			auto: 800,
			speed: 1000
		});
	});
</script>

So why doesn't it work? My Page Here - what am I missing? I can't view the source code of the auto scroll demo and so can't copy and paste.

I've implemented rcarousel on this page but I don't like the way it works as I want a carousel that increments one image at a time.

If anyone can help me that'd be great as jQuery and my brain don't mix and I can never get things working.

[Eskymo]

I just found this and thought brilliant - if I follow these instructions it will work... nope still can't get it working. Can someone help me with this???

[zed]

I don't see your "$(document).ready(function() {" etc in your code.

[Mikec1uk]

Hey,

Should the jquery be:

<script type="text/javascript">
	$(function() {
		$("#carousel").jCarouselLite({
			auto: 800,
			speed: 1000
		});
	});
</script>

I'm not sure where the .auto and .jCarouselLite come from?

[Eskymo]

zed, on 13 January 2012 - 02:18 PM, said:

I don't see your "$(document).ready(function() {" etc in your code.

maybe that's because it's not there - where does that need to go? I've just copied and pasted the scripts from the site and there was no "$(document).ready(function() {" in their example....

[zed]

I just scanned that link you gave of how to install and it said

Quote

Now, take a look at the most crucial part, do you see something like this?

<script>
$(document).ready(function() {
$(“.widget_style”).jCarouselLite({
btnPrev: “.previous”,
btnNext: “.next”,
/*this makes it a true carousel rather than a slideshow*/
circular: true
});
});
</script>

[Eskymo]

Mikec1uk, on 13 January 2012 - 02:23 PM, said:

Hey,

Should the jquery be:

<script type="text/javascript">
	$(function() {
		$("#carousel").jCarouselLite({
			auto: 800,
			speed: 1000
		});
	});
</script>

I'm not sure where the .auto and .jCarouselLite come from?

no idea either - I've added your version of the script and still nothing... why can't they provide proper documentation with these things? Actually if you click on auto scroll in the right hand nav you get the script there, so I've reverted back to my version...

This post has been edited by Eskymo: 13 January 2012 - 02:33 PM

[Eskymo]

zed, on 13 January 2012 - 02:31 PM, said:

I just scanned that link you gave of how to install and it said

Yes i tried that and it didn't work either... I followed the tutorial to the letter - no luck. I don't want next and previous buttons I want it set to auto play.

This post has been edited by Eskymo: 13 January 2012 - 02:42 PM

[Mikec1uk]

I just tried it and it should work. Are the links to the js files right?

Try linking to Google's hosted jquery library:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Rather than one hosted on your server.

[Eskymo]

Mikec1uk, on 13 January 2012 - 02:49 PM, said:

I just tried it and it should work. Are the links to the js files right?

Try linking to Google's hosted jquery library:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Rather than one hosted on your server.

I downloaded the js files from the site so I presumed they were right. I've taken out the link to my jquery file and remplaced it with the google link - still not working - have you got link for the other scripts I'm linking to?

[Mikec1uk]

Hey,

If your js files are in your js folder, it should work.

The code i have looks like this:

In head section:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jcarousellite.js"></script>
<script type="text/javascript" src="js/easing.js"></script>

and the HTML/jQuery:

     <div id="carousel">
          <ul>
               <li><a href="http://www.financialplanning.org.uk/directory/united-kingdom/london-city/london/duncan-glassey" title="CFP - We hold the globally recognised standard of excellence" target="_blank" id="btn-cfp"></a></li>
	       <li><a href="http://www.sifa-centre.info/search/firm_individuals.asp?reference=4408" title="We are members of SIFA" target="_blank" id="btn-sifa"></a></li>
	       <li><a href="http://www.apil.org.uk/" title="1st tier expert in financial planning" target="_blank" id="btn-apil"></a></li>
	       <li><a href="http://www.fpanet.org/professionals/Connect/CommunitiesofInterest/InternationalCommunity/" title="Members of International FPA Community" target="_blank" id="btn-fpa">1</a></li>		
	       <li><a href="#" title="New Model Adviser® awards 2012 - Finalist: Best IFA Firm (Scotland and Northern Ireland)" target="_blank" id="btn-nma">2</a></li>	
	       <li><a href="#" title="The Personal Finance Society - The professional body for the financial planning profession in the UK" target="_blank" id="btn-pfs">3</a></li>		
          </ul>
     </div>
     <script type="text/javascript">
          $(function() {
               $("#carousel").jCarouselLite({
                    auto: 800,
                    speed: 1000
	       });
          });
    </script>

and it all works fine for me...

This post has been edited by Mikec1uk: 13 January 2012 - 03:00 PM

[Eskymo]

thanks for having a look. I just copied your exact code and I get this - it doesn't work as a carousel at all - the images just show up all bunched up in the middle. So what am I doing wrong.

 screengrab.jpg (7.25K)
Number of downloads: 2

This post has been edited by Eskymo: 13 January 2012 - 03:07 PM

[Mikec1uk]

Eskymo, on 13 January 2012 - 03:05 PM, said:

thanks for having a look. I just copied your exact code and I get this - it doesn't work as a carousel at all - the images just show up all bunched up in the middle. So what am I doing wrong.

screengrab.jpg

Try giving the list items a width...e.g.

#carousel ul li {
     width:320px;
}

or give each hyperlink a width e.g. #btn-cfp

This post has been edited by Mikec1uk: 13 January 2012 - 03:19 PM

[Eskymo]

Mikec1uk, on 13 January 2012 - 03:17 PM, said:

Try giving the list items a width...e.g.

#carousel ul li {
     width:320px;
}

or give each hyperlink a width e.g. #btn-cfp

thanks for the tip - dont that and three now appear - but they don't move at all - so something is still wrong...

[Eskymo]

I've given up and used http://sorgalla.com/...ects/jcarousel/ instead that a friend emailed me and managed to get this working due to the good documentation within a matter of minutes. So I've deleted all the files I no longer need and implemented the new script on the live site page.

Thanks for all your help...