jQuery Image Slider – Part 1

15th of December 2013 25

jQuery Image Slider – Part 1


In this lesson we go over the HTML and CSS of the jQuery image slider. In the next lesson we will be creating the universal jQuery file which will handle the…
Video Rating: 4 / 5

Filed under § jquery animate — Tagged with , , ,

Share it!

Was it good for you to?

Sponsors

Support for the site!

No sponsors at the moment.



25 great comment(s) for this post

  1. Creep4Play 3:42 am 15/12 of 2013

    It’s easy possible without jQuery,

    HTML:
    [...]


    [...]



    [...]

    “css/slider.css”:
    #slider{position:relative;}#slider img{width:100%;}#slider #sliderLNav{background
    :url(../images/leftarrow.png) left center no-repeat;background-size:auto
    25%;margin-right:50%;width:50%;height:100%;}#slider #sliderRNav{background:url(../images/rightarrow.png) right center
    no-repeat;background-size:auto
    25%;margin-left:50%;width:50%;height:100%;}#slider
    img+img,#sliderLNav,#sliderRNav{position:absolute;opacity:0;top:0;bottom:0;left:0;}

    “js/slider.js”:
    window.onload=function(){function g(){return
    setInterval(function(){h(b+1)},8E3)}function
    h(a){k||(k=!0,a>=e.length&&(a=0),0>a&&(a=e.length-1),c(e[a],1),c(e[b],0),b=a,setTimeout(function(){k=!1},400))}function
    c(a,c){clearInterval(a.a);var
    b=parseFloat(window.getComputedStyle(a).getPropertyValue(“opacity”)),d=1;a.a=setInterval(function(){a.style.opacity=b+(c-b)*d/12;12< ++d&&clearInterval(a.a)},25)}var d=document.getElementById("slider");d.innerHTML+='

    ‘;var
    e=d.getElementsByTagName(“img”),l=document.getElementById(“sliderLNav”),m=document.getElementById(“sliderRNav”),b=0,k=!1,f=g();d.onmouseover=function(){c(l,1);c(m,1)};d.onmouseout=function(){c(l,0);c(m,0)};l.onclick=function(){h(b-1);clearInterval(f);f=g()};m.onclick=function(){h(b+1);clearInterval(f);f=g()}};

    Reply
  2. Arman Nagaepetian 4:31 am 15/12 of 2013

    Good tut bro

    Reply
  3. tutz4u 5:29 am 15/12 of 2013

    You know you can use Notepad++ because that’s what I use.

    Reply
  4. Ammad Amjad Tarar 6:08 am 15/12 of 2013

    MY JQUERY SLIDER IS NOT WORKING , CAN ANYBODY HELP?

    Reply
  5. Joel Persmark 6:29 am 15/12 of 2013

    “HelpingDevelop 11 month ago
    The website is currently under construction I am sorry :p it will be open
    soon we hope!”
    Yeah right…

    Reply
  6. Hytham Nabil 6:30 am 15/12 of 2013

    Great tutorial..thank you..but my slider view the 1st image & then make the
    animated effect then view loading gif image & keep it forever!

    Reply
  7. Danish Qamar 6:53 am 15/12 of 2013

    grate 

    Reply
  8. Alpha dec 7:29 am 15/12 of 2013

    fantastic tutorial, that dont work!.

    Even their homepage dont work.

    Reply
  9. Matin Pathan 7:30 am 15/12 of 2013

    Hi friends is there any way that i can use the same concept in asp.netapplication

    Reply
  10. mrAspDotNet 7:31 am 15/12 of 2013

    Your tuts are just amazing , I love them because you keep them simple and
    that really matters , thank you!

    Reply
  11. Nazanin es 8:10 am 15/12 of 2013

    $(“.Slider #1″) Check this between your class name and id must put a space
    Mine did not work too when I put space it works so well

    Reply
  12. involved1984 8:52 am 15/12 of 2013

    Hi There’s a beter way to make Javascript slideshows without programming.
    You can visualy create Javascript slideshows with photator.com

    Reply
  13. Mike M. 9:47 am 15/12 of 2013

    You need to link a jquery source script. Either a folder or a google apis.

    Reply
  14. got5432 10:03 am 15/12 of 2013

    emm maybe you called your div class different, but its .slider img{ width:
    800px; height: 350px; display: none; } you have slide. this helps

    Reply
  15. Evan McCurry 10:40 am 15/12 of 2013

    My picture is not disappearing when you told me to turn display to none.
    .slide img{ width:540px; height:960px; display:none; } please help.

    Reply
  16. Sishir Pokhrel 10:44 am 15/12 of 2013

    Nice Logic. Thnks

    Reply
  17. Futuung Namu 10:58 am 15/12 of 2013

    all coming back soon . whats on earth? are you have a plan to make money in
    youtube? so be sure that ur website is working 100% .. thanks anyway for
    the tips.

    Reply
  18. Futuung Namu 11:56 am 15/12 of 2013

    Pou soundtrack!

    Reply
  19. Pip Joy 12:29 pm 15/12 of 2013

    no images after first slides … jquery ?? triple-checked syntax… your
    jquery not workng pls explain

    Reply
  20. Pip Joy 12:55 pm 15/12 of 2013

    I really want this effect bro … pls update your jquery … there must be
    a small error in it

    Reply
  21. Sean Julyan 1:35 pm 15/12 of 2013

    Well done, and thanks…

    Reply
  22. shooton1 2:05 pm 15/12 of 2013

    No it is not.

    Reply
  23. Helping Develop 2:10 pm 15/12 of 2013

    The website is currently under construction I am sorry :p it will be open
    soon we hope!

    Reply
  24. rfolympic 2:23 pm 15/12 of 2013

    how do we do this as a wordpress plugin? Great tutorial man! thanks

    Reply
  25. vandepa 3:14 pm 15/12 of 2013

    brilliant tutorial, but now that we have a perfectly running slider made
    how do I put it in a div within a website? is there say a simple way to
    source the slider into a div on another page?

    Reply

Your opinion matters. Add it below.


Tip: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Recent comments

Categories



Copyright jqueryui.info since 2010. All rights reserved. Design and the Absolute Theme by Tommie Hansen.