Edit in JSFiddle

$(function () {
    
	//carouselInの高さ、幅を設定
    carouselIn$ = $('#carousel div').wrapAll('<div class="carouselIn" />').parent();
    var vieWidth = $('#carousel').width();
    var vieHeight = $('#carousel').height();
    carouselIn$.width(vieWidth * 3).height(vieHeight);
    
});

<div id="carousel" class="cf">
<div><img src="http://dummyimage.com/220x150/000000/fff.jpg&text=01" width="100" height="100" alt=""></div>
<div><img src="http://dummyimage.com/220x150/000000/fff.jpg&text=02" width="100" height="100" alt=""></div>
<div><img src="http://dummyimage.com/220x150/000000/fff.jpg&text=03" width="100" height="100" alt=""></div>
<div><img src="http://dummyimage.com/220x150/000000/fff.jpg&text=04" width="100" height="100" alt=""></div>
<div><img src="http://dummyimage.com/220x150/000000/fff.jpg&text=05" width="100" height="100" alt=""></div>
<div><img src="http://dummyimage.com/220x150/000000/fff.jpg&text=06" width="100" height="100" alt=""></div>
<div><img src="http://dummyimage.com/220x150/000000/fff.jpg&text=07" width="100" height="100" alt=""></div>
<div><img src="http://dummyimage.com/220x150/000000/fff.jpg&text=08" width="100" height="100" alt=""></div>
<div><img src="http://dummyimage.com/220x150/000000/fff.jpg&text=09" width="100" height="100" alt=""></div>
</div>
    
    <p class="next">次へ</p>

#carousel {
    width: 330px;
    height: 100px;
    margin: 0 auto;
    overflow: hidden;
}

#carousel .carouselIn {
    background: yellow;
}

#carousel .carouselIn div {
    float: left;
    margin-right: 10px;
}

.next {
    background:#009;   
    color: #fff;
    display: inline;
}