JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="slider multiple-items">
<div>1</div>
	<div><div style="width:1000px;">2</div></div>
	<div>3</div>
	<div><div style="width:2000px;">
  4
  </div></div>
	<div>5</div>
	<div>6</div>
</div>

CSS

.slider .slick-list .slick-slide {
    background-color: #fff;
    border: 1px solid #888;
    padding: 5px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin: 0 2px;
}

.slick-initialized .slick-slide {
    display: block;
}
.slider .slick-slide {
    background-color: #BFB !important;
}
.slick-slide {
    display: none;
    overflow:hidden;
    float: left;
    height: 100%;
    min-height: 1px;
}

JavaScript

$('.multiple-items').slick({
      infinite: true,
      dots: true,
   //   slidesToShow: 3,
     autoplay:true,
     autoplaySpeed:3000,
      slidesToScroll: 1
    }).on('afterChange', function(event, slick, currentSlide){
  
  var realwidth=$('.slick-active',this).width(),
  	internalwidth=$('.slick-active>div',this).width(),
    totalSpeed=slick.options.autoplaySpeed||10000;
    if(internalwidth>realwidth){
    $('.slick-active>div',this).css({marginLeft:0}).animate({marginLeft:(realwidth-internalwidth)},totalSpeed);
    console.log(realwidth,internalwidth,totalSpeed)
    }

  });