Carousel V0.5

by pphheerroonn

HTML

<div id="slider-container-outer">
	<div id="slider-container" class="slider-container-transition">
		<div class="slider-item" data-position="1">Item 1</div>
		<div class="slider-item" data-position="2">Item 2</div>
		<div class="slider-item" data-position="3">Item 3</div>
		<div class="slider-item" data-position="4">Item 4</div>
    <div class="slider-item" data-position="5">Item 5</div>
	</div>
</div>
<button id="move-button">Move Item</button>

CSS

#slider-container-outer {
	overflow: hidden;
}

#slider-container {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
}

/* CSS transition applied when translation of items happen */
.slider-container-transition {
	transition: transform 0.7s ease-in-out;
}

.slider-item {
	width: 50%;
  margin-right:10px;
  background: red;
	flex-shrink: 0;
}

JavaScript

const FlexSlider = {
	// total no of items
	num_items: document.querySelectorAll(".slider-item").length,
	
	// position of current item in view
	current: 1,

	init: function() {
		// set CSS order of each item initially
		document.querySelectorAll(".slider-item").forEach(function(element, index) {
			element.style.order = index+1;
		});

		this.addEvents();
	},

	addEvents: function() {
		var that = this;

		// click on move item button
		document.querySelector("#move-button").addEventListener('click', () => {
			this.gotoNext();
		});

		// after each item slides in, slider container fires transitionend event
		document.querySelector("#slider-container").addEventListener('transitionend', () => {
			this.changeOrder();
		});
	},

	changeOrder: function() {
		// change current position
		if(this.current == this.num_items)
			this.current = 1;
		else 
			this.current++;

		let order = 1;

		// change order from current position till last
		for(let i=this.current; i<=this.num_items; i++) {
			document.querySelector(".slider-item[data-position='" + i + "']").style.order = order;
			order++;
		}

		// change order from first position till current
		for(let i=1; i<this.current; i++) {
			document.querySelector(".slider-item[data-position='" + i + "']").style.order = order;
			order++;
		}

		// translate back to 0 from -100%
		// we don't need transitionend to fire for this translation, so remove transition CSS
		document.querySelector("#slider-container").classList.remove('slider-container-transition');
		document.querySelector("#slider-container").style.transform = 'translateX(0)';
	},

	gotoNext: function() {
		// translate from 0 to -100% 
		// we need transitionend to fire for this translation, so add transition CSS
    let w = document.querySelector("#slider-container").clientWidth +'%';
		document.querySelector("#slider-container").classList.add('slider-container-transition');
		document.querySelector("#slider-container").style.transform =...