Flickity variable width test

HTML

<script src="https://unpkg.com/[email protected]/dist/flickity.pkgd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/flickity.css">
<div class="carousel">
            <div class="item"><img src="http://www.lorempixel.com/150/280/city" alt=""></div>
            <div class="item"><img src="http://www.lorempixel.com/175/220/city" alt=""></div>
            <div class="item"><img src="http://www.lorempixel.com/250/300/city" alt=""></div>
            <div class="item"><img src="http://www.lorempixel.com/290/175/city" alt=""></div>
            <div class="item"><img src="http://www.lorempixel.com/320/480/city" alt=""></div>
            <div class="item"><img src="http://www.lorempixel.com/150/120/city" alt=""></div>
            <div class="item"><img src="http://www.lorempixel.com/180/150/city" alt=""></div>
            <div class="item"><img src="http://www.lorempixel.com/220/175/city" alt=""></div>
            <div class="item"><img src="http://www.lorempixel.com/320/480/city" alt=""></div>
            <div class="item"><img src="http://www.lorempixel.com/250/120/city" alt=""></div>
            <div class="item"><img src="http://www.lorempixel.com/320/150/city" alt=""></div>
</div>

CSS

body * {
    padding: 0;
    margin: 0;
}

.carousel {
    display: block;
    position: relative;
    height: 200px;
    background: #ffff99;
}

.item {
    display: inline-block;
        height: 200px;
        width: auto;
}

.img-container {
    height: 100%;
}

img {
    height: 100%;
}

JavaScript

$('.carousel').flickity({
    	pageDots 		 : false,
		wrapAround 		 : true,
    	prevNextButtons  : true
});