Назначить var из элемента массива

Question

У меня есть слайдер, который я построил с использованием известной ширины слайда, но мне нужно изменить его, чтобы разместить слайды разного размера неизвестной ширины.

Проблема Я устанавливаю массив с шириной каждого слайда внутри контейнера. Когда вы нажимаете кнопки «Next» и «Назад», ему нужно вытягивать ширину из массива соответствующего элемента и перемещать родительский контейнер влево на эту сумму. Прямо сейчас это только скользящее заданное количество, так как var не обновляется с новой шириной (сумма для слайда).

Это jsFiddle. При щелчке по следующему или предыдущему, контент должен скользить так, чтобы заголовок был позицией, где он находится в ярости. http://jsfiddle.net/qKpWb/3/

Вот мой код:

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 ==== =========

Это то, что возвращается, когда я запускаю его.

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

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

Моя проблема возникает, когда мне нужно на самом деле использовать информацию, которая создается в массиве, чтобы контейнер DIV слайд влево или вправо, используя ширину, установленную в insuranceSlideWidthArray

Answer 1

рабочий код в случае, если кто-нибудь на самом деле интересно ...

$('.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; 
    } 
}); 

Answer 2

Вам нужно создать массив ширины ползунка страхового слайдера и знайте, какая из них находится на своем месте, чтобы вы знали, сколько нужно сдвинуть влево. Затем вы просто обновляете переменную, которая указывает на текущий элемент в массиве.

Позаботьтесь о локализованных переменных и не забывайте, что 70px - это немного странность в качестве базовой линии.