infinite carousel

HTML

<div class="carousel">
		<ul>
			<li>
      <img src="https://via.placeholder.com/140x100">
      <div class="more-info">
      <h3>Los Angeles</h3>
      <p>We had such a great time in LA!</p> </div></li>
			<li><img src="https://via.placeholder.com/140x100"> <span class="more-info">more info 2</span></li>
			<li><img src="https://via.placeholder.com/140x100"> <span class="more-info">more info 3</span></li>
			<li><img src="https://via.placeholder.com/140x100"><span class="more-info">more info 4</span></li>
			<li><img src="https://via.placeholder.com/140x100"><span class="more-info">more info 5</span></li>
			<li><img src="https://via.placeholder.com/140x100"><span class="more-info">more info 6</span></li>
			<li><img src="https://via.placeholder.com/140x100"><span class="more-info">more info 7</span></li>
			<li><img src="https://via.placeholder.com/140x100"><span class="more-info">more info 8</span></li>
			<li><img src="https://via.placeholder.com/140x100"><span class="more-info">more info 9</span></li>
		</ul>
	</div>
 <a href="javascript:void(0);" class="btnPrevious">Previous</a>
<a href="javascript:void(0);" class="btnNext">Next</a>

CSS

.carousel{
    padding-top: 20px;
    /*width: 357px;*/
    width: 100%;
    overflow: hidden;
    height: 100%;
    position: relative;
}
.carousel ul{
    position: relative;
    list-style: none;
    list-style-type: none;
    margin: 0;
    height: 50px;
    padding: 0;
}
.carousel ul li{
    height: 100px;
    width: 140px;
    float: left;
    margin-right: 1px;
    background: #f2f2f2;
    text-align: center;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 20px;
    padding-right: 20px;
}


.more-info {
    font-size: smaller;
}

.carousel ul li .more-info {
    display: none;
}

.carousel ul li.expanded{
    width: 200px;
    background-color: #f9f9f9;
    
}
.carousel ul li.expanded .more-info {
    display: block;
    height: 500px;
}

JavaScript

$(function(){
    var carousel = $('.carousel ul');
    var carouselChild = carousel.find('li');
    var clickCount = 0;
    var canClick = true;
    var itemWidth = carouselChild.first().outerWidth(true); //Including margin
    var lastItem;

    // Get an element in the middle of the visible part of the carousel    
    var getMiddleElement = function($carousel){
        var carouselWidth = $carousel.width();
        var $items = $carousel.find('li');
        var lastVisibleItem = 0;
        $items.each(function(index, el) {
            if ( $(this).position().left >= carouselWidth ) {
                return false;
            }
            lastVisibleItem = index;
        });
        
        return $items.eq(Math.floor(lastVisibleItem/2));
    }; // getMiddleElement
    
    
    //Set Carousel width so it won't wrap
    carousel.width(itemWidth * carouselChild.length);
    
    // Expand the middle element
    var $middle = getMiddleElement($('.carousel')).toggleClass('expanded');
    
    //Set the event handlers for buttons.
    $('.btnNext').click(function() {
        if (canClick) {
            canClick = false;
            clickCount++;
            
            //Animate the slider to left as item width 
            carousel.stop(false, true).animate({
                    left : '-='+itemWidth
                },600, function(){
                    //Find the first item and append it as the last item.
                    lastItem = carousel.find('li:first');
                    lastItem.remove().appendTo(carousel);
                    carousel.css('left', 0);
                    canClick = true;
                    
                    // Collapse the previous middle and expand the new one
                    $middle.toggleClass('expanded');
                    $middle = getMiddleElement($('.carousel')).toggleClass('expanded');
                });
        }
    }); // btnNext
    
    $('.btnPrevious').click(function() {
        if (canClick) {
         ...