Very Simple Image Slider Slideshow with left and right button No autoplay

Question

I m trying to make a very  very simple image slider slideshow with no autoplay please  I only want to go to next or prev image on click  Having some issues as you can read below   Here s the jsFiddle http   jsfiddle net HsEne 12   i just used background colors instead of images in the fiddle as well as switched img to divs but it s the exact same problem of course   The HTML    lt div id  slider-wrapper  gt    lt div id  slider  gt   lt img class  sp  src   img1 jpg  gt   lt img class  sp  src   img2 jpg  gt   lt img class  sp  src   img3 jpg  gt   lt img class  sp  src   img4 jpg  gt   lt img class  sp  src   img5 jpg  gt   lt img class  sp  src   img6 jpg  gt   lt  div gt    lt img id  button-previous  src   button-arrow-left jpg  gt   lt img id  button-next  src   button-arrow-right jpg  gt   lt  div gt    The CSS    slider-wrapper   display  block  max-width  790px  margin  5  auto  max-height  500px  height  100       slider   display  block  position  relative  z-index  99999  max-width  710px  width  100   margin  0 auto      button-previous    position  relative  left  0  margin-top  40   width  40px  height  60px      button-next   position  relative  margin-top  40   float  right      sp   position  absolute      slider  sp   max-width  710px  width  100   max-height  500px      jQuery for next button   jQuery  document   ready function        jQuery   slider  gt  img gt 0    hide         jQuery   button-next   click function              jQuery   slider  gt  img first        fadeOut 1000       next        fadeIn 1000       appendTo   slider                The above jQuery works fine  except it skips the first image if a user clicks the next button on last slide  It only displays the first image one time  all other images will keep sliding every time next is clicked  For some reason display  none gets added to the first image but I don t know where that code is coming from   jQuery for previous button   jQuery  document   ready function        jQuery   slider  gt  img gt 0    hide         jQuery   button-previous   click function              jQuery   slider  gt  img last        fadeOut 1000       next        fadeIn 1000       appendTo   slider                This jquery code above will return the just previewed image like it should  But when clicked again it doesn t do anything   I also tried  prev   in replace of  next    It works fine the first time you click on the previous button  Say we are viewing Image  4  When I click previous button it goes to Image  3  like it should  But when click on it again it doesn t go to Image  2  it goes back to Image  4   and then  3 and then  4  repeating itself

User · Answer

Why try to reinvent the wheel  There are more lightweight jQuery slideshow solutions out there then you could poke a stick at  and someone has already done the hard work for you and thought about issues that you might run into  cross-browser compatability etc    jQuery Cycle is one of my favourite light weight libraries    What you want to achieve could be done in just      jQuery   slideshow   cycle       timeout 0     no autoplay     fx   fade     fade effect  although there are heaps     next    next       prev    prev            JSFIDDLE TO SEE HOW EASY IT IS

User · Answer

lt script type  text javascript  gt                        document  ready function e                                mqimg   mouseover function                                                             imgprev   animate  height   250px  width   70   left   15    100  html   lt img src      this  attr  src      width  100   height  100     gt                                                             mqimg   mouseout function                                                             imgprev   animate  height   0px  width   0   left   50    100                                                                           lt  script gt                       lt style gt                       mqimg  cursor pointer                        lt  style gt                       lt div style  position relative  width 100   height 1px  text-align center   gt  enter code here                       lt div id  imgprev  style  position absolute  display block  box-shadow 2px 5px 10px  333  width 70   height 0px  background  999  left 15   bottom 15px    gt  lt  div gt   lt img class  mqimg  src  spppimages 1 jpg  height  100px    gt   lt img class  mqimg  src  spppimages 2 jpg  height  100px    gt   lt img class  mqimg  src  spppimages 3 jpg  height  100px    gt   lt img class  mqimg  src  spppimages 4 jpg  height  100px    gt   lt img class  mqimg  src  spppimages 5 jpg  height  100px    gt

User · Answer

After reading your comment on my previous answer I thought I might put this as a separate answer   Although I appreciate your approach of trying to do it manually to get a better grasp on jQuery I do still emphasise the merit in using existing frameworks   That said  here is a solution  I ve modified some of your css and and HTML just to make it easier for me to work with  WORKING JS FIDDLE -  http   jsfiddle net HsEne 15    This is the jQuery    document  ready function        sp   first   addClass  active        sp   hide            active   show             button-next   click function             active   removeClass  active   addClass  oldActive                           if       oldActive   is   last-child                  sp   first   addClass  active                      else              oldActive   next   addClass  active                      oldActive   removeClass  oldActive            sp   fadeOut            active   fadeIn                          button-previous   click function            active   removeClass  active   addClass  oldActive                   if       oldActive   is   first-child                  sp   last   addClass  active                         else          oldActive   prev   addClass  active                         oldActive   removeClass  oldActive            sp   fadeOut            active   fadeIn                      So now the explanation  Stage 1 1  Load the script on document ready   2  Grab the first slide and add a class  active  to it so we know which slide we are dealing with   3  Hide all slides and show active slide  So now slide  1 is display block and all the rest are display none   Stage 2 Working with the button-next click event  1  Remove the current active class from the slide that will be disappearing and give it the class oldActive so we know that it is on it s way out   2  Next is an if statement to check if we are at the end of the slideshow and need to return to the start again  It checks if oldActive  i e  the outgoing slide  is the last child  If it is  then go back to the first child and make it  active   If it s not the last child  then just grab the next element  using  next     and give it class active   3  We remove the class oldActive because it s no longer needed   4  fadeOut all of the slides  5  fade In the active slides  Step 3  Same as in step two but using some reverse logic for traversing through the elements backwards   It s important to note there are thousands of ways you can achieve this  This is merely my take on the situation

User · Answer

Very simple code to make jquery slider  Here is two div first is the slider viewer and second is the image list container  Just copy paste the code and customise with css        lt div class  featured-image  style  height 300px  gt        lt img id  thumbnail  src  01 jpg   gt       lt  div gt        lt div class  post-margin  style  margin 10px 0px  padding 0px   id  thumblist  gt       lt img src  01 jpg  gt       lt img src  02 jpg  gt       lt img src  03 jpg  gt       lt img src  04 jpg  gt       lt  div gt        lt script type  text javascript  gt              function changeThumbnail                                 thumbnail   fadeOut 200               var path     thumbnail   attr  src                var arr  new Array    var i 0                  thumblist img   each function index  element                   arr i    this  attr  src                   i                                var index  arr indexOf path               if index   arr length-1               path arr 0               else             path arr index 1                   thumbnail   attr  src  path  fadeIn 200               setTimeout changeThumbnail  5000                               setTimeout changeThumbnail  5000        lt  script gt

[jquery] Very Simple Image Slider/Slideshow with left and right button. No autoplay

Examples related to jquery

Examples related to onclick

Examples related to slider

Examples related to slideshow

Examples related to autoplay