Assign var from element of an array

Question

I have a slider I built using a known slide width, but I need to change it to accomodate different sized slides of unknown widths.

The Problem I am setting an array with the widths of each slide inside my container. When you click the next and back buttons it needs to pull in the width from the array of the corresponding element and slide the parent container to the left that amount. Right now it is only sliding a set amount since the var does not update with the new width (amount to slide).

Here is a jsFiddle. On click of next or prev, the content should slide so that the title is positions where it is innitially. http://jsfiddle.net/qKpWb/3/

Here is my code:

JS

$(document).ready(function() {

    var insuranceSlideSpeed = 600;
    var slideResetSpeed = 1800;
    var insuranceTotalSlides = $('.insurance-slide-controller').children().length;
    var insuranceCurrentSlide = 1;
    var insuranceNextSlide = 1;
    var insuranceSlideArray = [];
    var insuranceSlideWidthArray = [];
    var currentSlideWidth = 0;
    var totalSlidesWidth = 0;
    var currentSlideWidthTotal = 0;
    var insuranceSlide = 0;

    $('#insuranceSlideController').children().each(function() {
        //add individual class for each item
        var insuranceSlideClass = ('.insuranceItem' + insuranceSlide);
        $(this).addClass(insuranceSlideClass);
        //get width of current and total items
        currentSlideWidth = $(this).width();
        currentSlideWidthTotal = currentSlideWidth + 70;
        totalSlidesWidth = totalSlidesWidth + currentSlideWidth;
        //assign each item to array
        insuranceSlideArray.push(insuranceSlideClass);
        insuranceSlideWidthArray.push(currentSlideWidth);
        //console.log("insuranceSlideClass = " + insuranceSlideClass);
        //console.log("insuranceSlide = " + insuranceSlide);
        insuranceSlide ++;
    });
    //console.log("insuranceSlideArray = " + insuranceSlideArray);
    //console.log("insuranceSlideWidthArray = " + insuranceSlideWidthArray);

    $('.insurance-slider-next').click(function(){
        insuranceNextSlide ++;
        if (insuranceCurrentSlide < insuranceTotalSlides) {
            $('.insurance-slide-controller').animate({ 'left': '-=' + currentSlideWidthTotal + 'px' }, insuranceSlideSpeed );
            insuranceCurrentSlide = insuranceNextSlide;
        } else {
            resetInsuranceSlider();
            insuranceNextSlide = insuranceCurrentSlide;
        }
    });

    $('.insurance-slider-prev').click(function(){
        insuranceNextSlide --;
        if (insuranceCurrentSlide > 1) {
            $('.insurance-slide-controller').animate({ 'left': '+=' + currentSlideWidthTotal + 'px' }, insuranceSlideSpeed );
            insuranceCurrentSlide = insuranceNextSlide;
        } else {
            insuranceNextSlide = insuranceCurrentSlide;
        }
    });

    function resetInsuranceSlider(){
        $('.insurance-slide-controller').animate({ 'left': '70' }, slideResetSpeed );
        insuranceCurrentSlide = 1;
        insuranceNextSlide = 1;
    }

});

HTML

<!-- Slider -->
<div class="insurance-description-slider">
    <div class="insurance-slider-next">next</div>
    <div class="insurance-slider-prev">previous</div>
    <div class="insurance-slider-content">
        <div class="insurance-slide-controller" id="insuranceSlideController">
            <!-- Slide Section -->
            <div class="insurance-slide">
                <div class="insurance-slide-divider"></div>
                <div class="insurance-slide-label">title1</div>
                <!-- Slide Item -->
                <div class="insurance-slide-item">
                    <div class="insurance-item-headline">header</div>
                    <div class="insurance-item-copy">Copy copy copy copy copy copy copy</div>
                    <div class="insurance-item-link"><a href="#">link</a></div>
                </div>
                <!-- END Slide Item -->
            </div>
            <!-- END Slide Section -->
            <!-- Slide Section -->
            <div class="insurance-slide">
                <div class="insurance-slide-divider"></div>
                <div class="insurance-slide-label">title2</div>
                <!-- Slide Item -->
                <div class="insurance-slide-item">
                    <div class="insurance-item-headline">header</div>
                    <div class="insurance-item-copy">Copy copy copy copy copy copy copy</div>
                    <div class="insurance-item-link"><a href="#">link</a></div>
                </div>
                <!-- END Slide Item -->
                <div class="insurance-slide-item">
                    <div class="insurance-item-headline">header</div>
                    <div class="insurance-item-copy">Copy copy copy copy copy copy copy</div>
                    <div class="insurance-item-link"><a href="#">link</a></div>
                </div>
                <!-- END Slide Item -->
            </div>
            <!-- END Slide Section -->
            <!-- Slide Section -->
            <div class="insurance-slide">
                <div class="insurance-slide-divider"></div>
                <div class="insurance-slide-label">title3</div>
                <!-- Slide Item -->
                <div class="insurance-slide-item">
                    <div class="insurance-item-headline">header</div>
                    <div class="insurance-item-copy">Copy copy copy copy copy copy copy</div>
                    <div class="insurance-item-link"><a href="#">link</a></div>
                </div>
                <!-- END Slide Item -->
        </div>
    </div>
</div>
<!-- END -->

============== UPDATE =============

This is what is being returned when I run it.

insuranceSlideArray = .insuranceItem0,.insuranceItem1,.insuranceItem2,.insuranceItem3,.insuranceItem4,.insuranceItem5,.insuranceItem6,.insuranceItem7

insuranceSlideWidthArray = 420,560,700,280,280,700,700,280

My Problem comes when I need to actually USE the information that is being set in the array to make the container div slide left or right using the widths set in insuranceSlideWidthArray

Answer 1

You need to build an array of the insurance slider item widths and know which of them is in place so you know how much to slide left. You then simply update a variable which points to the current element in the array.

Take care with localised variables and don't forget that 70px is a bit of an oddity as a baseline.

Answer 2

the working code in case anyone was actually interested...

$('.insurance-slider-next').click(function(){
    insuranceNextSlide ++;
    if (insuranceCurrentSlide < insuranceTotalSlides) {
        slideNewWidth = insuranceSlideWidthArray[thisSlide];
        thisSlide ++;
        $('.insurance-slide-controller').animate({ 'left': '-=' + slideNewWidth + 'px' }, insuranceSlideSpeed );
        insuranceCurrentSlide = insuranceNextSlide;
    } else {
        resetInsuranceSlider();
        insuranceNextSlide = insuranceCurrentSlide;
    }
});