Can someone help me design simple slider with Auto Start/ Fade out / fade in, next, in same position .

0 ANDREW RAE · October 12, 2015
The advice so far received is to do it in J query ?  Does this mean I will need 3 files . HTML, CSS and Jquery Js . I want to display these 5 or 6 Images to be on the index page directly under the Header with a width of 960 pxs  X 320 pxs , gentle transitions of opacity over 6 or 7 seconds to work on all machines. All images are similar such as different clouds structures but a theme nonetheless.
I don't understand how the HTML calls in the other files to act or function. Do I have to include the Jquery library in my website file and if so in what format and place. Are there special codes to go in the <HEAD> or at bottom of <BODY>. 

Post a Reply


Oldest  Newest  Rating
0 Craig Charlton · October 14, 2015
oh my.... that's a whole book there my friend....
If you don't yet understand that you will need links such as jquery (as you propose to use it) and css in your html head then I would suggest you are not quite ready for your task....

Yes you need 3 files....

html.... where you will place everything that goes on your page.... and link to your external files which are:
css... to position and make it all pretty...
javascript.... which will include your jquery...

You could actually do it in 1 file but this is far from good practice and will only pickle your head....

I would suggest you first learn on this site a little about html and css as they always go together...

Then move on to javascript including jquery
0 ANDREW RAE · October 15, 2015
Thanks Craig for your reply.  I have done the 3 files necessary and they seem to work in codepen and fiddle pen although the display is slightly different , but the do not display in the Dreamweaver ( show in Chrome, Firefox or iexplorer ) where the images just line up under each other instead of sliding as they do in the codepen. 
I shall spend a bit more time on solving the issues myself but if I get nowhere fast can I show you the codes for you to Look at. ?
  I have seen the 1 page method by Drew Ryan in 

 which looks exciting and he claims it works on all machines and retains it's Aspect in re-sizing.  
Would be interested in your opinion on this method.
Thanks a lot.
Andy Rae.
0 Craig Charlton · October 17, 2015
lots of different things "work" there are probably a)50 ways of doing what you want to do and even more b)add ons (some good some bad).... then there are at least a*b youtube videos on it.... nobody answers because you are not asking a specific question.... and what you ask is achieved in soooo many different ways but mostly what you are talking about are bad ways.. (in that they are not correct procedure as in "good practice"


a div with id "slider" holding your images in order.... style this and position it with css


#slider {
 // positional stuff as above +
  position: relative;     // needed so the position of the images takes its bearing off this parent
  overflow: hidden      // hides everything outside the div... so images stacked ready to come in are hidden
  height: 320 px;
  width: 960px;

#image1  {
position: absolute;
left: 0;

#image2  {
position: absolute;
left: 960px; //sets it just outside your slider window ready to come in from the right

#image3 {
position: absolute;
left: 1920px;  //sets it 2 X 960 to the right so is in a queue... so image 4 adds 960 to this etc....

Then all you need is a little javascript to move them left or right depending on clicks or automation (timing)...

that's your easiest way.... you can do soooo much more.... but that wil give you a basic slider.... your javascript will dictate how and what..... but basically if you -960px off each of your images "left" css property, (do it with timing)  all your images will move to the left by 1 position..... if you add 960 on they will move back right one position (but only once there is one to the left of course)
  • 1

HTML / CSS / Web Design


Discuss, share, ask, learn and teach HTML5 and CSS3.