0

我有一个单项轮播，共有 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 小提琴：http: //jsfiddle.net/GKv4p/38/

4

0 回答 0