0

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

4

2 回答 2

0

万一有人真正感兴趣的工作代码......

$('.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;
    }
});
于 2013-10-10T15:42:01.003 回答
0

您需要构建一个保险滑块项目宽度数组，并知道它们中的哪一个已到位，这样您就知道要向左滑动多少。然后，您只需更新一个指向数组中当前元素的变量。

注意局部变量，不要忘记 70px 作为基线有点奇怪。

于 2013-10-09T18:52:53.243 回答