Question

我用JavaScript制作了一个Slider，可以显示所有图像。

目前，每张幻灯片只有一张图像，但我需要的是每张幻灯片显示两张图像，但我不知道该怎么办。我尝试了许多方法，但没有任何效果。

在这里您可以看到我的所作所为。

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

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

// This should get you an object with one property per drive
const results = Object.fromEntries(
  (await Promise.all(
      config.drives.map(async drive => [drive, await scan(drive, exts)])
    )
  )
  .map(
    ([drive, files]) => [
      drive,
      // we reduce each drive's file array to an object with
      // one property per file extension
      files.reduce(
        (acc, file) => {
          acc[file.type].push(file)
          return acc
        },
        Object.fromEntries(exts.map(ext => [ext, []]))
      )
    ]
  )
)

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>

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

1 个答案: