How to show 2 images per slide?

Question

I did a Slider with JavaScript who show all my images.

Currently I only have one image per slide, but What i need is show two images per slide but i don't know how can i do it. I tried many ways but none worked.

here you can see what i made.

I have searched on several tutorials but not found how to display the two images at the same time. someone can help me please?

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