<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- A carousel / slideshow with vertical navigation where each slide goes in opposite direction. --> <div class="ss"> <div class="ss-col"> <div class="ss-col-content"> <div class="ss-col-content-child js-ss-col-even"> <img class="ss-img" src="https://via.placeholder.com/400x600/1a1713/f2f2f2/?text=1"> <img class="ss-img" src="https://via.placeholder.com/400x600/4a515f/f2f2f2/?text=3"> <img class="ss-img" src="https://via.placeholder.com/400x600/565a97/f2f2f2/?text=5"> <img class="ss-img" src="https://via.placeholder.com/400x600/7f6698/f2f2f2/?text=7"> </div> </div> </div> <div class="ss-col"> <div class="ss-col-content"> <div class="ss-col-content-child odd js-ss-col-odd"> <img class="ss-img" src="https://via.placeholder.com/400x600/e5bfa1/000/?text=2"> <img class="ss-img" src="https://via.placeholder.com/400x600/eeefea/000/?text=4"> <img class="ss-img" src="https://via.placeholder.com/400x600/ffdc73/000/?text=6"> <img class="ss-img" src="https://via.placeholder.com/400x600/fb836b/000/?text=8"> </div> </div> </div> <div class="ss-controls"> <button class="ss-controls-btn prev js-ss-prev">Prev</button> <button class="ss-controls-btn next js-ss-next">Next</button> </div> </div>

.ss { position: relative; display: flex; justify-content: space-between; width: 95vh; margin: 2rem auto 0; } .ss-col { position: relative; width: 50%; } .ss-col:first-child .ss-col-content { border-radius: 5px 0 0 5px; } .ss-col:nth-child(2) .ss-col-content { border-radius: 0 5px 5px 0; } .ss-col-content { padding-top: 71.25vh; position: relative; overflow: hidden; } .ss-col-content-child { display: flex; flex-direction: column; position: absolute; top: 0; left: 0; width: 100%; transition: -webkit-transform 400ms ease-out; transition: transform 400ms ease-out; transition: transform 400ms ease-out, -webkit-transform 400ms ease-out; } .ss-col-content-child.odd { flex-direction: column-reverse; } .ss-img { display: block; position: relative; width: 100%; height: 71.25vh; -o-object-fit: cover; object-fit: cover; } .ss-controls { position: absolute; bottom: 0; left: 50%; -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%); display: flex; border-radius: 3px; border: 1px solid #ccc; overflow: hidden; } .ss-controls-btn { width: 3.5rem; height: 2.5rem; line-height: 2.5rem; border: none; cursor: pointer; text-transform: uppercase; font-size: 0.8rem; } .ss-controls-btn:hover, .ss-controls-btn:focus { outline: none; color: #aaa; }

const getFirstEl = (className) => document.getElementsByClassName(className)[0]; const setTranslate = ($el, value) => $el.style.transform = `translateY(${value})`; const elColEven = getFirstEl('js-ss-col-even'); const elColOdd = getFirstEl('js-ss-col-odd'); const btnPrev = getFirstEl('js-ss-prev'); const btnNext = getFirstEl('js-ss-next'); const stHalf = elColEven.childElementCount; const ndHalf = elColOdd.childElementCount; let page = 0; function setOddToFirst() { const value = `-${100 / ndHalf * (ndHalf - 1)}%`; elColOdd.style.transition = 'none'; setTranslate(elColOdd, value); setTimeout(() => elColOdd.style.transition = ''); } function updateSliders() { setTranslate(elColEven, `-${(100 / stHalf) * page}%`); setTranslate(elColOdd, page === ndHalf ? `${100 / ndHalf}%` // if goes beyond last when odd child : `-${(100 / ndHalf) * (ndHalf - 1 - page)}%`); } setOddToFirst(); btnPrev.addEventListener('click', () => { if (page === 0) { return false; } page--; return updateSliders(); }); btnNext.addEventListener('click', () => { if (page === stHalf - 1) { return false; } page++; return updateSliders(); });