Jump to content

JQuery Image Slider


Spunky

Recommended Posts

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...