{"title\_suggestion": "Display image slideshow"}

by Tan

HTML

<div id="app_contain" class="app_contain">
<div id="slider_contain" class="slider_contain">
<div class="slider_header">
<div class="slider_title" id="slider_title" onclick="slider_prev();"><h1>Secured Loan Application</h1></div>
<div class="progress"><div id="prog_bar"></div></div>
</div>
  
<div id="slider" class="slider slide0">
<div class="slider_item">Home</div>
<div class="slider_item">1<br>1</div>
<div class="slider_item">2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>end</div>
<div class="slider_item">3<br>3<br>3<br>3<br>3<br>end</div>
<div class="slider_item">4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>end</div>
      
</div>

<div class="slider_footer">
<div class="slider_nav" id="slider_nav" onclick="slider_next();"><span>Next</span></div>
</div>

</div>
</div>

<div id="prev" ><button onclick="slider_prev();">Prev</button></div>
<div id="next" ><button onclick="slider_next();">Next</button></div>

CSS

body {font-family:Arial;}
.app_contain {max-width:500px;margin:auto;background:#e6f4ff;box-sizing: border-box;padding:20px;}
.slider_contain {margin:auto;position:relative;overflow:hidden;box-sizing: border-box;}
.slider {    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;width: 100%;transition:all 0.5s ease;box-sizing: border-box;padding:0px 0px 40px 0px;}
.slider_item {min-width:100%;box-sizing: border-box;padding:60px 0px 40px 0px;}

.slide0 {left:0;}
.slide1 {transform :translateX(-100%);}
.slide2 {transform :translateX(-200%);}
.slide3 {transform :translateX(-300%);}
.slide4 {transform :translateX(-400%);}
.slide5 {transform :translateX(-500%);}
.slide6 {transform :translateX(-600%);}
.slide7 {left:-400%;}
.slide8 {left:-400%;}
.slide9 {left:-400%;}
.slide10 {left:-400%;}

.slider_header {box-sizing: border-box;position:absolute;top:0px;left:0px;right:0px;z-index:100;}

.progress {box-sizing: border-box;padding:1px;border:1px solid #bbbbbb;background-color:white;}
.progress div {box-sizing: border-box;width:0%;background-color:#00a3d9;height:8px;background: repeating-linear-gradient(
    -55deg,
    #00a3d9,
    #00a3d9 4px,
    #77c1d9 4px,
    #77c1d9 8px
  );}

.slider_title h1 {font-size:20px;line-height:20px;font-weight:bold;display:block;margin:0 0 10px 0;padding:0;}
.slider_title span {font-size:16px;line-height:20px;font-weight:normal;display:block;margin:0 0 10px 0;padding:0;cursor:pointer;}
.slider_title span::before {content:"‹ ";vertical-align: middle;display: inline-block;margin: -3px 5px 0 0;}

.slider_footer {padding:20px 0 0 0;box-sizing: border-box;position:absolute;bottom:0px;left:0px;right:0px;z-index:100;text-align:right;background-color:#e6f4ff;}
.slider_nav span {font-size:16px;line-height:20px;font-weight:normal;display:block;margin:0;padding:0;cursor:pointer;}
.slider_nav span::after...

JavaScript

var slide_count = 4;
var position = 0;
var slide = document.getElementById("slider");
var prog_bar = document.getElementById("prog_bar");
var slider_title = document.getElementById("slider_title");
var prog_count = (100 / slide_count);
var prog = 0;

function slider_next() {
position = (position + 1);
if (position > slide_count) {position = slide_count;}
slide.className = "slider slide"+position;
prog = (prog + prog_count);
if (prog > 100) {prog = 100;}
prog_bar.style.transitionDuration = "0.5s";
prog_bar.style.width = prog + "%";
if (position == 1) {slider_title.innerHTML = "<span>Back</span>";}
slide_height(position);
}

function slider_prev() {
position = (position - 1);
if (position < 0) {position = 0;}
slide.className = "slider slide"+position;
prog = (prog - prog_count);
if (prog < 0) {prog = 0;}
prog_bar.style.transitionDuration = "0.5s";
prog_bar.style.width = prog + "%";
if (position == 0) {slider_title.innerHTML = "<h1>Secured Loan Application</h1>";}
slide_height(position);
}

var slider_contain = document.getElementById("slider_contain");
var def_slideHeight = parseInt(window.getComputedStyle(slide).height) + "px";
slider_contain.style.height = def_slideHeight;

function slide_height(x) { 
var slides = document.querySelectorAll('.slider_item');
if (x == 0) { var new_slideHeight = def_slideHeight; }
else {var new_slideHeight = parseInt(window.getComputedStyle(slides[x]).height) + "px";}
slider_contain.style.transitionDuration = "0.5s";
slider_contain.style.height = new_slideHeight;
}