knockout.js Foreach with observableArray

This demo shows you how to use foreach and observable array

HTML

<div class="Recent-wroks"><!-- start services -->
				<div class="wrap">
				<div class="Recent-wrok">
					<h3 class="heading">Bonjour <b>Nathalie Leroy</b>, Bienvenue sur votre tableau de bord</h3>
					<!----start-img-cursual---->
					<div id="owl-demo" class="owl-carousel">
		<div class="thumbnail">
          <img src="http://www.icône.com/images/icones/1/4/applications-internet-3.png" alt="" class="img-circle" width="150" height="150">
          <div class="caption">
            <h3 class="text-center">Dossiers</h3>
          </div>
        </div>
		 <div class="thumbnail">
          <img src="http://www.icône.com/images/icones/1/4/applications-internet-3.png" alt="" class="img-circle" width="150" height="150">
          <div class="caption">
            <h3 class="text-center">Activités</h3>
          </div>
        </div>
		        <div class="thumbnail">
          <img src="http://www.icône.com/images/icones/1/4/applications-internet-3.png" alt="" class="img-circle" width="150" height="150">
          <div class="caption">
            <h3 class="text-center">Fréquentations</h3>
          </div>
        </div>
		        <div class="thumbnail">
          <img src="http://www.icône.com/images/icones/1/4/applications-internet-3.png" alt="" class="img-circle" width="150" height="150">
          <div class="caption">
            <h3 class="text-center">Utilitaires</h3>
          </div>
        </div>
		        <div class="thumbnail">
          <img src="http://www.icône.com/images/icones/1/4/applications-internet-3.png" alt="" class="img-circle" width="120" height="150">
          <div class="caption">
            <h3 class="text-center">Attributions</h3>
          </div>
        </div>

						

					</div>
	<!----//End-img-cursual---->
				</div>



				</div>
			</div>

CSS

img{max-width:100%;}
/*end reset*/

.wrap{
	margin:0 auto;
	width:80%;
}


/**********services***********/
.Recent-wroks{
	margin: 4% 0;
}
.Recent-wrok{
	text-align:center;
	background: #ffffff;
}
.heading{
	font-size: 1.8em;
	color: #6F6F6F;
	text-transform: uppercase;
	margin: 1% 0% 2% 0%;
	text-align: left;
	font-weight: 600;
}
.Recent-wrok h3{
	width: 60%;
	margin: 0 auto;
	font-size: 1.1em;
	color: #292929;
	line-height: 1.5em;
}

JavaScript

var ViewModel = function(  ) {
		var self = this;
		self.init=Function(){
			$("owl-demo").owlCarousel({
				items : 5,
				lazyLoad : true,
				autoPlay : false,
				navigation : true,
				navigationText : ["", ""],http://www.xn--icne-wqa.com/images/icones/1/4/applications-internet-3.png
				rewindNav : false,
				scrollPerPage : false,
				pagination : false,
				paginationNumbers : false,
			});
		}

		
	};

ko.applyBindings(viewModel, document.getElementById("form-container"));