Slider JS

jQuery(document).ready(function(){
    // #########################
    // ## Slider and Loader
    // #########################

    var currentSlide = 1;   // Loader
    var totalWidth = 0;
    var timer;
    var slides = [];

    if (jQuery('#main > .wrapper').width() < 480) {
        return;
    }

    // Set the first slide as active
    jQuery("#slider img:first").addClass("slide-active");

    function loadWidths() {
        var notLoaded = false;
        totalWidth = 0;
        jQuery(".slide").each(function(i) {
            var $this = jQuery(this);
            var slideWidth = $this.outerWidth(true);
            slides[i] = {
                'position' : totalWidth + 1,
                'slide' : $this
            };
            totalWidth = totalWidth + slideWidth;
            if (slideWidth < 1) {
                notLoaded = true;
            }
        });

        if (notLoaded) {
            setTimeout(loadWidths, 599);
            return;
        }

        // Set the gallery width to the totalWidth so all items are on same line
        jQuery("#slider").width(totalWidth + 10); //added 10 because sometimes the final slide doesn't fit for some reason

        // All slides loaded so create timer to auto-advance slides
        timer = window.setInterval(function() {
            jQuery(".button-next").trigger('click');
        }, 4000);
    }

    function shiftSlide(targetItem) {
        // Make sure the item exists
        if (targetItem) {
            // Clear the timer
            if (timer)
                clearInterval(timer);

            // The new position is just to the left of the targetItem
            var newPosition = targetItem.position;

            // Add active class to the target item
            targetItem.slide.addClass("slide-active");

            // Remove the active class from all other items
            targetItem.slide.siblings().removeClass("slide-active");

            // Animate slide to the correct position
            jQuery("#slider").animate({
                left : - newPosition
            });

            // Restart the timer
            timer = window.setInterval(function() {
                jQuery(".button-next").trigger('click');
            }, 4000);

        }
    }

    // Prev button click
    jQuery(".button-prev").click(function(e){
        e.preventDefault();
        var targetItem;
        if (currentSlide <= 1) {
            // Reset to last slide
            targetItem = slides[slides.length - 1];
            currentSlide = slides.length;
        } else {
            // Set target item to the item before the active item
            currentSlide -= 1;
            targetItem = slides[currentSlide - 1];
        }
        shiftSlide(targetItem);
    });

    // Next button click
    jQuery(".button-next").click(function(e){
        e.preventDefault();
        var targetItem;
        if (currentSlide == slides.length) {
            // Reset to first slide
            targetItem = slides[0];
            currentSlide = 1;
        } else {
            // Set target item to the item after the active item
            targetItem = slides[currentSlide];
            currentSlide += 1;
        }
        shiftSlide(targetItem);
    });

    loadWidths();
});