Repeat slider - Javascript, CSS, HTML

Repeat slider using HTML, CSS and JavaScript. Only button control

by Roshan Karunarathna

HTML

<div class="alm-gamification-performers-section">
									<div class="alm-gamification-week-performers-container">
										<p class="alm-gamification-week-performers-title">Top Performers Last Week</p>
										<div class="alm-gamification-week-performers-slider-container">
											<div class="alm-gamification-week-performers-slider-sections" id="alm-slider">
											
												<div class="alm-gamification-week-performers-slider-section">
													<div class="alm-slider-image-section">
														<img...

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
* {
    padding: 0;
    margin: 0;
    font-family: "Roboto";
	font-weight: 300;
}
.alm-gamification-performers-section {
    width: 640px;
    margin: 100px auto 0;
}
.alm-gamification-overall-container {
    background-color: #fafafa;
    padding: 0 60px 10px 10px;
}
.alm-gamification-title-sections{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.alm-gamification-title-section h2{
    font-family: "Roboto";
	font-weight: 400;
	font-size: 24px;
	color: rgba(0,0,0,0.87);
	line-height: 32px;
}




.alm-gamification-main-sections {
    display: flex;
    margin: 0 auto;
    justify-content: center;
}
							

.alm-gamification-overall-inner-container {
    max-width: 1280px;
    margin: 0 auto;
}

									   

.alm-gamification-week-performers-slider-section .alm-slider-image-section > img , .alm-gamification-week-performers-slider-section .alm-slider-image-section > .img {
  width: 100%;
  height: auto;
}
.alm-gamification-week-performers-slider-section {
    margin: 0 20px;
    transition: all 300ms ease-in-out 0s;
    position: relative;
}
.alm-gamification-week-performers-slider-section .alm-slider-image-section{
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 50%;
  transition: all 300ms ease-in-out 0s;
  border: 1px solid #e4e4e4;
}
.alm-gamification-week-performers-slider-section.alm-slider-active {
  margin: 0 30px;
}
.alm-gamification-week-performers-slider-section.alm-slider-active .alm-slider-image-section{
  width: 100px;
  height: 100px;
}
.alm-gamification-week-performers-slider-sections {
	position: relative;
	left: 0;
	display: flex;
	margin-left: 0;
	height: 100px;
	transition: all 300ms ease-in-out 0s;
	justify-content: space-around;
	align-items: center;
	width: 100%;
}
.alm-gamification-week-performers-slider-container {
  position: relative;
  height: 100px;
  /* border: 1px solid #ddd; */
  padding: 20px 20px 55px;
  overflow:...

JavaScript

var AllElements = document.getElementsByClassName("alm-gamification-week-performers-slider-section");
		var AllElementsLength = AllElements.length;
		var AllElementsContainer = document.getElementById("alm-slider");	
		var MElement = AllElementsLength / 2;
		var MRElement = Math.ceil(MElement);
			
		window.onload = function() {
			setElement();
			
		};
		
		
		function setElement(){	
		
			var MElement = AllElementsLength % 2;
			
			if( AllElementsLength == 1){
			
				AllElementsContainer.classList.add("alm-s-one");	
			
			}else if( AllElementsLength == 2){
			
				for(var j=1 ; j <= 1 ; j++){
					decrement();
				}
				AllElementsContainer.classList.add("alm-s-two");	
			
			}else if( AllElementsLength == 3){
			
				for(var j=1 ; j <= 2 ;j++){
					decrement();
				}
				AllElementsContainer.classList.add("alm-s-three");	
			
			}else if( AllElementsLength == 4){
			
				for(var j=1 ; j <= 2 ; j++){
					decrement();
				}
				AllElementsContainer.classList.add("alm-s-four");	
			
			}else if( AllElementsLength >= 5){
			
				for(var j=1 ; j <= 3 ; j++){
					decrement();
				}
				AllElementsContainer.classList.add("alm-s-five");	
			
			}
		}
		
		
		function increment(){		
			
			var AllElementsArray = Array.prototype.slice.call(AllElements);								
			var incRemoveArray = null;
			var incAddArray = null;
		
			incRemoveArray = AllElementsArray.shift();
			
			AllElementsContainer.classList.add("alm-slider-animation-right");
			AllElementsContainer.appendChild(incRemoveArray);
						
			setTimeout(almSlAnRight, 600)			
		}		
		function almSlAnRight(){	
			AllElementsContainer.classList.remove("alm-slider-animation-right");
		}
		
		
		function decrement(){	
			
			var AllElementsArray = Array.prototype.slice.call(AllElements);							
			var incRemoveArray = null;
			var incAddArray = null;
		
			incRemoveArray =...