<h2>Auto slider</h2>

                                                  <div id="slide-cont"><span class="sme">SCROLL UP</span>

                                                                                                    <button><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1v4MWPCAnse55OdLTk59tfsLdGxaB-z4aaxjnm8wSEA&s" width="200px" height="200px"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREYqWS_RI3kcWIvaC3ZQaAB0xde2R5rQlg6Olp9UrkDQ&s" width="200px" height="200px">

                                                                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR09yTjS3kZuaXgXdS4Ir80HbzSJwoyh_L0etbNTnmh5g&s" width="200px" height="200px">
                                                                                                      <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRz0wbpsL23wbd-OjnEVO7pypnrF-GKMueMgNDHQ-dF6w&s' width='200px' height='200px'>

  <!----- add more images here -->

                                                                                                    </button>                 

                                                  </div>

h2{

                                                  text-shadow: 0 0 2px red;

                                                  font-family: serif;

}

body{

                                                  text-align: center;

                                              padding: 9px;

}

#slide-cont{

                                                  width: 400px;

                                                  height: 200px;

                                                  overflow: scroll;

                                                  margin: ;

                                                  border: 5px dotted red;

                                                  write-space: nowrap;

                                          

                                                  

}

                              #slide-cont button{

background-color: #55f;                                                                               

                              }                 

#slide-cont button img{

                                                  mix-blend-mode: multiply;

}

#slide-cont .sme{

                                                  position: absolute;

                                                  left: 38%;

                                                  color: rgb(255,255,255,0.5);

                                                  z-index: 99;

                                                  top: 30%;

                                                  text-shadow: 0 2px 2px #f00;

}

                                                  

let slideCont = document.getElementById('slide-cont');

slideCont.addEventListener('scroll', (e) =>{

                                                   if(e.target.scrollTop >= slideCont.scrollHeight - 201){

                                                                slideCont.style.borderColor = '#f88';

                                                                slideCont.scrollTop = 0;

}

})

function plus(){ slideCont.scrollBy(0,200);

                                                  slideCont.style.border = '5px dotted #f44';   

}

                                                                                          setInterval(plus, 3000)