javascript - 如何每张幻灯片显示 2 张图片？

Question

我用 JavaScript 做了一个显示我所有图片的 slider 。

目前我每张幻灯片只有一张图片，但我需要的是每张幻灯片显示两张图片，但我不知道该怎么做。我尝试了很多方法，但都没有用。

在这里你可以看到我做了什么。

我搜索了几个教程，但没有找到如何同时显示两个图像。有人可以帮帮我吗？

    (function () {
        'use strict';
        let slides = 
        [
        'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg',
        'https://www.presse-citron.net/wordpress_prod/wp-content/uploads/2018/11/meilleure-banque-image.jpg',
        'https://image.shutterstock.com/image-photo/bright-spring-view-cameo-island-260nw-1048185397.jpg',
        'https://www.lamodeenimages.com/sites/default/files-lmi/styles/1365x768/public/images/article/homepage/full/balenciaga-defile-pret-a-porter-femme-ete-printemps-2019-la-mode-en-images-cover3.jpg?itok=I41_VWrm',
        'https://images.charentelibre.fr/2019/09/04/5d7016527971bb79570d2e7b/default/1000/80-hectares-de-pins-sont.jpg'
        ],

            currentSlide = 0,
            doc = document,
            elSlide = doc.getElementById('slide'),
            elPrev = doc.getElementById('prev-slide'),
            elNext = doc.getElementById('next-slide'),

            showSlide = function (index) {
                if (index > -1 && index < slides.length) {
                    currentSlide = index;
                    elPrev.classList.remove('disabled');
                    elNext.classList.remove('disabled');
                    if (index === 0) {
                        elPrev.classList.add('disabled');
                    } else if (index === slides.length - 1) {
                        elNext.classList.add('disabled');
                    }
                    elSlide.src = slides[index];
                    elSlide.title = 'Picture ' + (index + 1) + ' of ' + slides.length;
                }
            },
            changeSlide = function (step) {
                let index = currentSlide + step;
                showSlide(index);
            },
            prevSlide = changeSlide.bind(null, -1),
            nextSlide = changeSlide.bind(null, 1);

        elPrev.addEventListener('click', prevSlide, false);
        elNext.addEventListener('click', nextSlide, false);

        showSlide(0);
    }());

.button {
    border: 1px outset #333;
    padding: 1em;
    display: inline-block;

    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.button:active {
    border-style: inset;
}
.disabled {
    color: #a6a6a6;
    border-color: #a6a6a6;
}
.disabled:active {
    border-style: outset;
}
.slide {
    width: 300px;
    height: 200px;
}
.slide-controls {
    width: 100%;
    position: relative;
    bottom: 8px;

}

#next-slide {
    position: absolute;
    bottom: 8px;
    right: 0;
    border-radius: 15px;
    border-color: #a6a6a6;
}

#prev-slide {
    position: absolute;
    bottom: 8px;
    left: 0;
    border-radius: 15px;
    border-color: #a6a6a6;
}

        <div class="block-center-portfolio">
            <div class="slide-controls">
                <img id="slide" style="width: 40%">
                <span class="button" id="prev-slide">&laquo;</span>
                <span class="button" id="next-slide">&raquo;</span>
            </div>
        </div>

Answer 1

    (function () {
        'use strict';
        let slides = 
        [
        'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg',
        'https://www.presse-citron.net/wordpress_prod/wp-content/uploads/2018/11/meilleure-banque-image.jpg',
        'https://image.shutterstock.com/image-photo/bright-spring-view-cameo-island-260nw-1048185397.jpg',
        'https://www.lamodeenimages.com/sites/default/files-lmi/styles/1365x768/public/images/article/homepage/full/balenciaga-defile-pret-a-porter-femme-ete-printemps-2019-la-mode-en-images-cover3.jpg?itok=I41_VWrm',
        'https://images.charentelibre.fr/2019/09/04/5d7016527971bb79570d2e7b/default/1000/80-hectares-de-pins-sont.jpg'
        ],

            currentSlide = 0,
            doc = document,
            elSlide = doc.getElementById('slide'),
            elSlide2 = doc.getElementById('slide2'),
            elPrev = doc.getElementById('prev-slide'),
            elNext = doc.getElementById('next-slide'),

            showSlide = function (index) {
                if (index > -1 && index < slides.length) {
                    currentSlide = index;
                    elPrev.classList.remove('disabled');
                    elNext.classList.remove('disabled');
                    if (index === 0) {
                        elPrev.classList.add('disabled');
                    } else if (index === slides.length - 1) {
                        elNext.classList.add('disabled');
                    }
                    elSlide.src = slides[index];
                    elSlide.title = 'Picture ' + (index + 1) + ' of ' + slides.length;
                    if (index !== slides.length - 1)
                       elSlide2.src = slides[++index];
                    else
                       elSlide2.src = "";
                }
            },
            changeSlide = function (step) {
                let index = currentSlide + step;
                showSlide(index);
            },
            prevSlide = changeSlide.bind(null, -2),
            nextSlide = changeSlide.bind(null, 2);

        elPrev.addEventListener('click', prevSlide, false);
        elNext.addEventListener('click', nextSlide, false);

        showSlide(0);
    }());

.button {
    border: 1px outset #333;
    padding: 1em;
    display: inline-block;

    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.button:active {
    border-style: inset;
}
.disabled {
    color: #a6a6a6;
    border-color: #a6a6a6;
}
.disabled:active {
    border-style: outset;
}
.slide {
    width: 300px;
    height: 200px;
}
.slide-controls {
    width: 100%;
    position: relative;
    bottom: 8px;

}
img{
  height: 150px;
}

#next-slide {
    position: absolute;
    bottom: 8px;
    right: 0;
    border-radius: 15px;
    border-color: #a6a6a6;
}

#prev-slide {
    position: absolute;
    bottom: 8px;
    left: 0;
    border-radius: 15px;
    border-color: #a6a6a6;
}

        <div class="block-center-portfolio">
            <div class="slide-controls">
                <img id="slide" style="width: 40%">
                <img id="slide2" style="width: 40%">
                <span class="button" id="prev-slide">&laquo;</span>
                <span class="button" id="next-slide">&raquo;</span>
            </div>
        </div>