I’m creating a jquery slide with this tutorial:
Create a Slick and Accessible Slideshow Using jQuery
I have put the html and css in place but I have no js knowlede so I was wondering where to put the js file. Do I just name the file anything I want and place it will all the other js files? if so how does my html and css know how to link to it?
If you view source on the demo page for that slideshow, you’ll see this in the head:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 560;
var slides = $('.slide');
var numberOfSlides = slides.length;
// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');
// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
.append('<span class="control" id="rightControl">Clicking moves right</span>');
// Hide left arrow control on first load
manageControls(currentPosition);
// Create event listeners for .controls clicks
$('.control')
.bind('click', function(){
// Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
});
// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
}
});
</script>
That’s all you need. There’s a link to the jQeury library that’s hosted on Google, and then a script specific to this slideshow (and the order matters—the library must come first). You could, it you wish, place the library and the other code in your scripts folder and link to them there.
You don’t need to do anything else, though. The JavaScript looks at your page and takes note of the HTML/CSS by itself.
I don’t get it - lol
so the script you posted above I put that where? And the script in the tutorial goes where?
confused
That means the <head> section. So, place the code I posted above in the <head> section of your page. (I’m surprised you’re confused, as you’ve done this before with another slider.)
If you were to view the source code of that slider’s demo page, and copy that code, and paste it into a page of your own, the slider will work as is (apart for the images not showing up). So you can see from that demo what the page code needs to look like.
In the head you have your links to CSS files and JS files, and in the body you have all your divs etc holding the slider content.
oh ok, I get it, the script itself is in the header and also links to a different script ( the library )
So what you mean is the script that is included in the head I can put in a .js file and link to it instead.
I just put all the in the header but it doesn’t seem to scroll, what have ai done wrong or do I need to enable anything?
sorry I got it I didn’t put the images in my folder
Yes: you can copy the code of those two scripts, place them in their own files somewhere in your site, and link to them in the head of your document (or even right at the bottom of your page, just before the closing </body> tag, which is becoming the preferred method.)
The reason a lot of people link to Google’s version of the code is that it is delivered quickly and people may already have that code cached in their browsers (through having visited another site with the same link). So it may speed up your site a bit.
I just put all the in the header but it doesn’t seem to scroll, what have ai done wrong or do I need to enable anything?
There’s nothing else you need to do, but you do have to check that the HTML still has any ids etc. that the script is looking for. We’d need to see you page to have a clue, though.
EDIT: I see you’ve resolved it. Great. 
saying that I put all the images in the file but it’s still not scrolling
sorry, we’re missing each other because your so efficient in replies
I have it all on my site now but it’s just not showing the images I uploaded although the urls are correct
or rather the scroller arrows are showing but at the top of the wep page instead of in the scroller itself
You don’t have any styles for the #slideshow div yet. You’ve really got to be careful and systematic when implementing something like this. Really look carefully at the original and check every part of it step by step: the original HTML, the styles that apply to it etc.
I put all the css styles in when I began as follows ( how do they not show? )
#slideshow #slidesContainer {
margin:0 auto;
width:560px;
height:263px;
overflow:auto; /* allow scrollbar */
position:relative;
}
#slideshow #slidesContainer .slide {
margin:0 auto;
width:540px; /* reduce by 20 pixels to avoid horizontal scroll */
height:263px;
}
/**
the css is defo in the style.css does it need to be somewhere else then?
OK, so you’ve put the CSS in, but it gives rules for #slideshow and #slidesContainer, neither of which exist in the HTML. You’ve given other names to the slider elements, like .sliderGallery, .slider etc.
That’s what I mean about being careful and systematic. If you change the class/ID names in the HTML, you need to change them in the CSS.
I understand, sorry about that
No need to be sorry! A forum is for asking questions. If I seemed critical in my reply, I didn’t mean to. I’m just speaking from experience, knowing that you’ve got to be really careful when modifying this stuff. Unless you work very carefully, checking at each step as you modify things, it all becomes as disaster that may need to be scrapped. (It’s like taking a car engine apart, I guess. You’ve got to keep track of where everything goes.) So make small changes at a time and check that you haven’t broken anything. I usually modify a gallery like this on a page of its own, and when it’s the way I want it, I insert it into the page.
no thanks, you’ve been really helpfull, I hope i’m not burdening too much, I will try and do all the troubleshooting possible before hand
