Custom responsive image slider

John_C wrote: »

I can't see the attached image. I think it's only visible to members of webdesignforums.

damn, i never knew that. Thanks for letting me know. Heres the image: http://i.imgur.com/VBuIPsN.jpg?1?4391

any ideas to what i can do?

John_C wrote: »

How new are you to web development?
There are two parts to what you want. Firstly you'll need to write up the html & css to match your design (static logo, responsive etc...). After that, you'll need to pick a javascript image slider to add. I recommend this one but there are loads of options.

im only doing this a few weeks, my second site. this is a template im working on : http://testjd.net46.net/ (just for testing, not final images)

if you resize the browser window you will see that the imageslider overlaps the logo and isnt responsive. i want to make some sort of container where i can put the logo and image slider in there and put it in the center so they never overlap and are always by each others side and bang in the center all the time.

Ive tried a 100 times with what ive made so id like to rip out the slider and start again coz im doing something wrong.

John_C wrote: »

Thanks,
You seem to have your slider working correctly. I'm not familiar with that one so I don't know whether it will fit your responsive design.
Your HTML and CSS are fairly messy though. I've uploaded a demo at this link showing what you should probably be aiming for:

http://jtcraddock.ie/boards/

John..Thanks alot! that is exactly what i need. I just tried to put the jquery js on the slider and now its not responsive (I think this was part of my prolem all along), but is "The Bird/Swipe" that you recomended responsive and how can I add it to this code you gave me?

John_C wrote: »

The instructions and API are at the git link here:
https://github.com/thebird/Swipe

I updated the demo on my site (http://jtcraddock.ie/boards/) with the slider or you can see a more complete version from one of my work projects here: http://jtcraddock.ie/demo/demo2.html

Earlier in the year, I spent a few days testing different javascript/jQuery sliders to get a good responsive one. This is the best one I've found.

Your the man, this is what i need, thanks alot. One more thing, I been trying to make your slider center dead in the middle of the page both vertically and horizontally but I can seem to get it, what do I need to do?

Nice site too by the way.

John_C wrote: »

You want margin:auto for that:
http://jtcraddock.ie/boards/centred.html

You can also use viewport units but they're not implemented in all devices.

ive been trying margin: auto but no luck and i just copied the code from that link but nothing, check out this jsfiddle : http://jsfiddle.net/gZDVL/14/

i added
html, body{
width:100%;
height:100%;
margin:0;
}
and

position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
to the #logo-and-slider

John_C wrote: »

set the height as well, adding height:200px to your fiddle roughly fixes it.

John I dont mean to bother you again but im trying to add 3 buttons or text links underneathe the "Logo" but they are going above the "Slider" and pushing the slider downwards. any suggestions on how i can add some buttons under the logo that will respond and re-scale accordingly?