Load div "data" on load - carousel

Question

I'm building an image carousel for for EPiServer, it works, but not exactly how I want it to. The current carousel starts spinning after I click the "next" button, before that it only shows one picture. I want it to start spinning directly when the page's loaded. See code for example. Ideas?
<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="#(Model.Interval.GetValueOrDefault(7) * 1000)" #Html.EditAttributes(m => m.ContentArea)>
<div class="carousel-inner">
#for (var index = 0; index < Model.Slides.Count(); index++)
{
var slide = Model.Slides.ElementAt(index);
<div class="item #(index == 0 ? "active" : string.Empty) animated fadeInRight">
#{
Html.RenderPartial(slide.GetCarouselSlidePartialViewName(Html), slide,
new ViewDataDictionary { { "ImageHeight", Model.ImageHeight.GetValueOrDefault(600) }, { "ImageWidth", Model.ImageWidth.GetValueOrDefault(1889) } });
}
</div>
}
</div>
<button href="#carousel" data-slide="next">CLICK ME</button>
#Html.FullRefreshPropertiesMetaData(new[] { "ContentArea" })
So when I click on the button, it starts spinning with the href to the top div, but I want it to start as soon as the page's loaded.
Thanks/
Fredrik

Answer 1

As Eric's Comment to your question, is this a javascript task to start your image carosel.
All EPiserver does is to render your image-carosel with data. the rest is up to your javascript carosel library to handle the interaction/animation.
There are mostly a property on image-carosel libraries that handles if the carosel should start on load or wait for interaction.
All I can help you with, having only the attached code is to tell the javascript to click your button on load. It's not a recomended way to do it, but it solves your problem.
$(document).ready(function() {
$('button[href=#carousel]').click();
});