Question

我有一个单项旋转木马共有3个幻灯片，通过单击上一个和下一个按钮进行导航，每次单击都会移动轮播并从阵列中添加幻灯片内容。

基本上当你点击 next 时，轮播会向右滑动一个值会增加并且数组项会被读取以创建下一张幻灯片，但我的增量似乎根本不正确。有人可以告诉我可能出错的地方。基本上我使用数学items[currentPage+1]和items[currentPage-1]来获取下一张和上一张幻灯片，但这似乎不正确，所以我的一些幻灯片显示为undefined

JS

var items = [
        'http://dummyimage.com/1000x400/00ad8a/ffffff&text=Slide+1',
        'http://dummyimage.com/1000x400/ab6100/ffffff&text=Slide+2',
        'http://dummyimage.com/1000x400/8900ab/ffffff&text=Slide+3',
        'http://dummyimage.com/1000x400/005eab/ffffff&text=Slide+4',
        'http://dummyimage.com/1000x400/ab003c/ffffff&text=Slide+5'],
        currentPage = 0,
        noOfPages = items.length,
        lastPage = noOfPages - 1;

btnNext.on('click', function (e) {
        e.preventDefault();

        if (currentPage === lastPage) {
            currentPage = 0;
        } else {
            currentPage++;
        }

        console.log('Current Page', items[currentPage]);

        //move carousel to right 100%
        carousel.css('transform', 'translateX(-100%)');

        $('.slide:first').insertAfter('.slide:last');

        var nextSlide = currentPage+1;

        //populate .slide:last with item[currentPage+1]
        $('.slide:last').html('<img src="' + items[nextSlide] + '" alt="" class="slide-img fluid">');

        setTimeout(function () {
            resetSlides();
            resetCarousel();

            setTimeout(function () {
                carousel.removeAttr('style').removeClass('expose-left expose-right');
            }, 100);

        }, 500);

    });

Js Fiddle： http://jsfiddle.net/GKv4p/38/

有关如何正确更新上一张和下一张幻灯片的轮播幻灯片增量值的指导？

0 个答案: