JSFiddle - React, Tailwind, and code Playground

by benhowdle89

HTML

<div class="infiniteCarousel">
  <div class="wrapper">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>        
  </div>
</div>

CSS

* {
			margin: 0;
			border: none;
			padding: 0;
			box-sizing: border-box;
		}
		.infiniteCarousel {
			overflow: hidden;
			width: 400px;
		}
		.wrapper {
			height: 250px;
			width: 1600px;
		}
		.wrapper li {
		    width: 400px;
		    height: 250px;
		    background: red;
		    color: white;
		    border: 5px solid green;
		    float: left;
		}

JavaScript

$('.wrapper li:first').clone().appendTo($('.wrapper ul'));
setInterval(function() {
    var mL = +$('.wrapper').css('margin-left').replace('px', ''), t = +$('.wrapper').css('width').replace('px', ''), w = +$('.wrapper li:first').outerWidth();
    if(t == (Math.abs(mL) + w)){
        $('.wrapper').css({
            marginLeft: 0
        });
    }
    $('.wrapper').animate({
        marginLeft: '-=' + w + 'px'
    });
}, 2000);