Javascript Slider

[Jtwa11]

Can anyone give me any direction on setting up a slider
I’ve stripped it down to only 2 images for simplicity

http://codepen.io/Jtwa/pen/meBdXg

[Beverleyh]

What kind of input are you anticipating from us?

[Beverleyh]

LOL!

You are more worldly than I, Paulie_D

[Beverleyh]

Ah, it all makes sense now I’ve seen the other thread https://css-tricks.com/forums/topic/slider-using-javascript/

If you’re looking for a slider like the one you linked too, try this simple one here http://fofwebdesign.co.uk/freebies-for-websites/css/slider-rwd-pips-auto-js.htm

This is the article to support it http://www.dynamicdrive.com/forums/entry.php?296-RWD-CSS3-Any-Content-Slider-(JS-auto-play)

Behaviour is very similar but it’s up to you to dress up the CSS

[Jtwa11]

@Beverleyh @Paulie_D

You guys are hilarious. I’m asking to see how you guys would solve the problem. This way, I can learn from your thought process. So to answer your dumb founded comment, the input I’m looking for is how to build a slider using just javascript.

This is a help forum, not stand up comedy. I learned to hack (and I’d say I’m pretty good at it) by asking these types of questions. So please refrain from making ill advised comments when someone looking to learn is in need of help.

@Beverleyh Please stop posting articles that you haven’t written. If you don’t know how to solve the problem, don’t act like you’ve helped by finding an article. I’m looking to learn by building, getting stuck and than asking what I should do next.

[Beverleyh]

Oh wow! Your gratitude astounds me JTwa11.

I asked you what input you anticipate because your question was vague – there was no JS and the CSS for the image positions appeared unfinished – it made more sense after I saw the other thread and then I piped up with a suggestion. I’m sorry if you took it to be sarcastic. Sheesh, a good deed never goes unpunished.

As for posting links to articles that are not mine, I think, like many offering help, we will link to articles that seem relevant in the circumstances. If I don’t know the answer, or don’t have a good inkling of the topic, I don’t reply.

If you’re referring to the articles I linked to in this thread, I actually wrote BOTH. It may help if I explain that I am a moderator at Dynamic Drive and hold a supporting blog there http://www.dynamicdrive.com/forums/blog.php?31699-Beverleyh And to further help and participate in the web community, I also post free scripts and demos from my own website http://fofwebdesign.co.uk/freebies-for-websites.php and http://fofwebdesign.co.uk/freebies-for-websites/demos-and-snippets.php If at any time I use snippets of code from other sources (which happens from time to time, through inspiration or necessity) I credit that source with a link in my work. I do not take other developers’ credit though, as you seem to imply.

I would hope that most people see that I do this for enjoyment, to try out new techniques, and to help fellow web developers. I’ve been in this game since 2003 – back to the days of spacer gifs and such – which granted, isn’t as long as some of the guys here, but I have gained a little knowledge myself along the way ;) I remember how difficult it was getting help myself back then, so I try to play my part in making it easier for others now. More the fool me some days, but at nearly 40 years of age, I accept that you can’t please or get on with everyone all of the time.

I do not know why you accuse me of not creating my own work. What has led you to that conclusion?

ps – Thank you Shikkediel – you took my initial post as intended :)
I guess my British-ness comes across differently to folks from other corners of the globe.

[Jtwa11]

I apologize for my reaction. I never seem to get the answers I’m looking. I took it as a sarcastic comment and more articles to read.

I’ve been developing for a year now and I find everyone that helps never just gives me the answer or the solution. For my slider, I know that I have to add eventListeners on my arrows and display:none on all images except for one. I’m just looking for the solution so I can learn from experts. I understand css/html and JavaScript that I can follow what’s going on. But I don’t know how to approach these problems and that’s why I ask such vague questions. There’s always more than one way to do something, but I’m looking for the best way to do something.

Again, I apologize for my reaction. I took your comments as an attack and I’ve been working extremely hard trying to make my dream career a reality.

[Jtwa11]

For anyone that comes across this same question. I created a slider with minimal code for your learning needs.

The main concept behind the slider is to;
+Make a div tag the width of one image.
+Inside your div tag you should have a ul tag the width of all your images combined.
+Make sure to float:left all your images and overflow:hidden so they are all on the same line.
+Then start shifting ul to the left with margin-left.

http://codepen.io/Jtwa/pen/gaXROz

[Jtwa11]

I just wanted the simplest form of a slider. I stripped everything to just 2 images.

The worst part about the internet is not many tutorials or help forums break it down to the bare bones. Once I understand the bare bones to an application, I can apply this concept to other forms of web development.

I found a tutorial that talked about shifting the view plane with margin-left and then it started to click. I can now start building on the image slider. My next step will be to add click events.

[Author]

Posts