Make a JQuery Slider

[ad_1]
In this video tutorial I show you how to make a JQuery Slider similar to the ones Apple uses. You could easily turn it into an Apple slider.

CODE IS HERE:


Posted

in

by

Tags:

Comments

36 responses to “Make a JQuery Slider”

  1. BruteBeetle101 Avatar

    When using this slider, the scrollbar wont scroll when using my laptop touch screen. Any way to fix that?

  2. Sonny Darvishzadeh Avatar

    this is a normal box with overflow-x: scroll, why are you using jquery?

  3. Derek Banas Avatar

    Yes you can do that

  4. Crantzenberg Avatar

    I assume you can put the css in a different folder and link to it?

  5. Derek Banas Avatar

    Here is your answer javascriptkit. com/javatutors/onmousewheel. shtml

  6. Ping Pong Avatar

    Great tutorial, the only one on the entire web that goes through scrolling sliders!! Strange thing: if I totally remove the jquery/javascript code, the slider still works. No problem with that. How do you amend the remaining code so that the mouse wheel can be used to slide the images across?

  7. Derek Banas Avatar

    I figure that it is very likely I'll have moved on to other things well before either Google or JQuery no longer exists. That is a good point though and why I never use anything that isn't well beyond a beta release. If something has only been around for a year or less I almost never pay attention to it. I've been burned way to many times in that exact situation

  8. Pvsmuntje Avatar

    I see that you're using items already on the internet for your website (JQuery source, Google font). What do you do when it stops working?

  9. Derek Banas Avatar

    I'll have to look into that. You'd have to change the names for all of the tags used to be able to have more than one on the page. I have another tutorial on editing the Coda slider on my youtube channel. You could quickly use this slider and the coda slider? I'll see if I can figure out the arrow problem

  10. Dean Fitzsimmons Avatar

    Cheers for you reply mate… I don't think I made any major changes I just adjusted 'top:' and 'left:' in the css for '.coda-nav-right a' and ''.coda-nav-left a'. Also Derek do you know if there is a way to get two carousels on the same page, so they both can cross link with each other?

  11. Derek Banas Avatar

    Thank you πŸ™‚ I haven't had an issue with chrome. I was able to get the arrow to bounce out if I didn't properly size scroll-pane, demo, or scroll-content. What changes did you make to the code on your end? That will help me find a solution

  12. Dean Fitzsimmons Avatar

    Cheers Derek that was an awesome tutorial! I have a question though for some reason my edited coda slider works perfectly well in firefox but when it comes to using chrome the right arrow is off of the page, do you know of any good solutions for this?

  13. Derek Banas Avatar

    I'm glad. They will super power your web development skills

  14. John Sanders Avatar

    Awesome videos dude. I have been trying to learn javascript and jquery for awhile now your vids are helping.

  15. Jacob HINDI Avatar

    thanks derek – really helpful

  16. RandomMalcolm Avatar

    he plays minecraft 0_o

  17. Derek Banas Avatar

    @NathanSnyder13 It is better to use my coda slider tutorial for featured content stuff. I just did it a few tutorials ago. Look on my YouTube channel. The look for the variable currentPanel in the code for that tutorial. When currentPanel is checked if it has the value of 1 "First Slide" change it to either 2 or the number representing your last slide. That's all you'd have to do. I hope that makes sense

  18. Derek Banas Avatar

    @NathanSnyder13 Yes you just have to programmatically skip showing the first slide after the first time. One conditional statement will get you what you want

  19. Derek Banas Avatar

    @tirathmistry You're very welcome. I'm glad they help πŸ™‚

  20. Tirath Mistry Avatar

    Excellent tutorial
    Thanks so much for your Big Help
    keep up good work
    God Bless you πŸ™‚

  21. Derek Banas Avatar

    @druciferophio Oh yes you guys are cool! Believe me if I thought what I was doing was pointless I'd stop. I get an average of 27 tutorial requests per day so I know a lot of people are at least watching what I've been doing. It's just hard for me to figure out what to do next because I get so many requests

  22. Derek Banas Avatar

    @jettrooper00 I'm glad you liked it. I'll add that tutorial to the list. Thanks for the idea

  23. Derek Banas Avatar

    @jsfaulds They are using the same techniques I used in my vertical menu tutorial. They display:none the pop up boxes on click and then absolutely position the additional text box on the screen. The only real difference is that I use relative positioning and trigger for the menu to open on mouseover. I hope that helps?

  24. John Faulds Avatar

    Another top tutorial Derek. Could you teach how to make the more info button reveal with jquery, more information about the product. Something like the slider on this site.
    socialsummit.cz

  25. Tim Avatar

    Wow a slider in 14 minutes, great tutorial!

    I'm really in to PHP at the moment and I was thinking if it was possible to make a video that explains the error messages. Because i don't know what half of them mean and I think i'm not the only one. Some are pretty self-explaining but others don't.

  26. druciferophio Avatar

    Thank you SOOOOOOOOOOOOOOOOO much for making these videos!!! I hope you know how much you are appreciated πŸ™‚

  27. Ahmed Cherif Avatar

    @derekbanas ok thank you derek for the anser. that's very helpfull.
    when i navigate on internet i'm trying to understand? how some website works.
    thats very lightning . thank you derek

  28. Derek Banas Avatar

    @supprof1 They are using Ajax techniques to pull the data then I'd guess. I don't know what the benefit would be in doing that?

  29. Ahmed Cherif Avatar

    @derekbanas i'm not us fast us you cook chef derek

  30. Ahmed Cherif Avatar

    @derekbanas i down't know what cms that they used. i think taht it is made with php mysql an javascript. but the generated link always end with dot html (index.html)??!!
    i know that cms because it's a newspaper and it's daily updated!!

  31. Derek Banas Avatar

    @supprof1 Javascript isn't a security threat. The main threats come from allowing access to your database. What CMS are you talking about that is 100% html? It would have to use a server side language of some sort to be considered a CMS

  32. Ahmed Cherif Avatar

    ok thank you very mutch
    i have a question
    i meet some cms which generate html pages
    i mean all the pages are in html tags, titles …
    this cms manages a dynamics website in php at mean while it generates and display html pages.
    i think they did it to inhance securite?! how they did that?
    i follow your channel because of you cool gay!!
    thank you very mutch

  33. Derek Banas Avatar

    @supprof1 You are super fast πŸ™‚ It just finished processing. I figured I'd cover your requests since I know you always watch my videos. This is the final piece of the shopping cart theme

  34. Ahmed Cherif Avatar

    i know you did this because of my request thank you very mutch for your concern
    that's very kind. i'am here always following
    thanks

  35. Ahmed Cherif Avatar

    thank you derek
    i caugth today in action

Leave a Reply

Your email address will not be published. Required fields are marked *