Spunky Posted April 13, 2014 Share Posted April 13, 2014 Hey everyone. I recently viewed a tutorial for making my own JQuery slider shown here: https://tutsplus.com/lesson/the-obligatory-slider/ Problem is, it is a little bit old and I am trying to get it to work with JQuery version 2.0.1. I did change a few things already but I am having such a headache trying to debug it more (at first it would literally do nothing with no JavaScript errors). If I download the lesson from that link, the code works perfectly. Here is my code: $(function(){ var sliderUL = $('div#slider').css('overflow','hidden').children('ul'); var imgs = sliderUL.find('img'); var imgsWidth = imgs[0].width; var imgsLen = imgs.length; var current = 1; var totalImgsWidth = imgsLen * imgsWidth; $('#slider-nav').show().find('button').click(function(){ var direction = $(this).data('dir'), loc = imgsWidth; (direction==='next') ? ++current : --current; if(current === 0){ current = imgsLen; loc = totalImgsWidth - imgsWidth; direction = 'next'; }else if(current - 1 === imgsLen){ current = 1; loc = 0; } transition(sliderUL,loc,direction); }); function transition(container,loc,direction){ var units; if(direction && loc !== 0){ units = (direction === 'next') ? '-=' : '+='; } container.animate({ 'marginLeft':units ? (units + loc) : loc }); }}); I am getting no errors when I run the script but it is just not working right. It will slide to "Image 2" just fine but then it does slide to "Image 3" or "Image 4", however it recognizes the amount of slides it does and properly returns to "Image 1" at its correct time. From "Image 1" it will go to "Image 4" just fine with the previous button but again that's it and it still recognizes when it is suppose to be at "Image 1" again and returns. The HTML is just a basic list but here it is if you need to test it: <div id="slider"> <ul> <li><img src="image1.png" width="900"></li> <li><img src="image2.png" width="900"></li> <li><img src="image3.png" width="900"></li> <li><img src="image4.png" width="900"></li> </ul></div> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now