JSFiddle - React, Tailwind, and code Playground

by Juan Kristoffer Sanio

HTML

<div class="simple-slider">
  <div>
    <img src="https://placehold.it/200x200">
    <label>Item 1</label>
  </div>
  
  <div>
    <img src="https://placehold.it/200x200">
    <label>Item 2</label>
  </div>
  
  <div>
    <img src="https://placehold.it/200x200">
    <label>Item 3</label>
  </div>
  
  <div>
    <img src="https://placehold.it/200x200">
    <label>Item 4</label>
  </div>
    
  <div>
    <img src="https://placehold.it/200x200">
    <label>Item 5</label>
  </div>
</div>

CSS

body { font-family: sans-serif; }

/****/

.simple-slider {
  width: 100%;
  text-align:center;
}

.simple-slider>div {
  display:inline-block;
  vertical-align:top;
  margin:0 25px;
}
.simple-slider>div>label {
  display:block;
}

JavaScript

var $simpleSlider = document.getElementsByClassName('simple-slider');

[].forEach.call($simpleSlider, function(el){
	var conatinerClientWidth = el.clientWidth,
  		collection = el.children,
      childWidth = collection[0].offsetWidth;
  
  
  console.log(conatinerClientWidth, collection, childWidth);
});