Hello. so im trying to make an imageslider for my Umbraco site.

im currently trying to use this piece of code but it dosnt work, the correct images are, however, displayed but they just stack on top of eachother and dosnt slide or move atall.

@inherits UmbracoTemplatePage

@{
    var mediaFolderId = (int)CurrentPage.BannersMediaFolder;
}

@if (mediaFolderId > 0)
{
    var mediaFolder = Umbraco.TypedMedia(mediaFolderId);
    var banners = mediaFolder.Children(x => x.DocumentTypeAlias == "Banner").ToList();
    var number = 0;

   <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner  ">
            @foreach (var banner in banners)
            {
                var link = Umbraco.TypedContent(banner.GetPropertyValue<int>("link"));


                    if (number >= 0)
                    {
                        <div id="item active">
                            <img src="@(banner.GetPropertyValue<string>("image"))"/>
                        </div>
                    } 
                    else
                        {
                        <div id="item">
                        <img src="@(banner.GetPropertyValue<string>("image"))"  />
                        </div>
                        }

            }
        </div>
    </div>

}

i thought it was a javascript problem however when i delete that code and paste in this simple version i have (with images from placehold.it) it works just fine with slide and everything.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner  ">

    <div class="item active">
      <img  src="http://placehold.it/500x250" alt="...">
      </div>

    <div class="item">
      <img  src="http://placehold.it/500x250" alt="...">
    </div>

    <div class="item">
      <img  src="http://placehold.it/500x250" alt="...">
    </div>
  </div>
</div>

Anyone got an idea on what this could be? i think the actual code works ok, not 100 % ofc. it gets the correct images and so on. but yeah any tips would be appreciated. or if you are aware of a nice method to create a simple slider that would be grate. im having some real trouble with them. i also tried to use Caroufredsel slider ( the tutorial other people on this forum has linked to aswell http://carlosmartinezt.com/2014/06/umbraco-7-and-mvc-practical-examples-part-2/) but i couldnt get that to work so i tried to implement the bootstrap carousel slider Html instead and that is now where i am. (my javascript links are located on my masterpage template) -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
                   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>