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>.
Can someone help me design simple slider with Auto Start/ Fade out / fade in, next, in same position .
Post a Reply
|Oldest Newest Rating|
· 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...
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...
· 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.
· 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
// 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;
left: 960px; //sets it just outside your slider window ready to come in from the right
left: 1920px; //sets it 2 X 960 to the right so is in a queue... so image 4 adds 960 to this etc....