Press Ctrl / CMD + C to copy this to your clipboard.
This post will be reported to the moderators as potential spam to be looked at
Hey guys,
Im trying to implement a carousel inside my view but im doing something wrong. Can anyone help?
@inherits Umbraco.Web.Macros.PartialViewMacroPage @{ @* Vi finder først alle magasiner 'Umbraco.Content(4662)' Så finder vi hvilket årstal vi er i 'Children.OrderBy(Id desc).ElementAt(0)' Tilsidst findes magasiner der tilhører det pågældende år 'Children.OrderBy(createDate desc)' *@ var magazinesMonths = Umbraco.Content(4662).Children.OrderBy("Id desc").ElementAt(0).Children.OrderBy("createDate desc"); int i = 0; <h2 style="text-align: center;"> <span style="text-transform: capitalize; color: black;">Magasinet Notat</span> </h2> <div class="container-fluid"> <div class="row-fluid"> <div class="carousel slide" id="myCarousel" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> </ol> <div class="carousel-inner"> <ul class="thumbnails"> @foreach (var mag in magazineMonths.Take(2)) { var magazineImage = Umbraco.Media(mag.magazineFrontpageImage); if (i == 0) { <div class="item active"> <li> <div class="thumbnail" id="magazineSlider"> <div class="magazineMonth"> <p style="text-transform: capitalize;">@mag.magazineDate.ToString("MMMM") magasinet</p> </div> <div class="magazineTitle"> <p><a href="@mag.Url">Se Magasin »</a></p> </div> <div class="magazinePicture"> <a href="@mag.Url"> <img class="magazineImg" src="@magazineImage.umbracoFile" /> </a> </div> @* HER KAN ARTIKLER FOR ET GIVET MAGASIN SKRIVES UD *@ @foreach (var article in mag.Children) { @article.Name } </div> </li> </div> } else { <div class="item"> <li> <div class="thumbnail" id="magazineSlider"> <div class="magazineMonth"> <p style="text-transform: capitalize;">@mag.magazineDate.ToString("MMMM") magasinet</p> </div> <div class="magazineTitle"> <p><a href="@mag.Url">Se Magasin »</a></p> </div> <div class="magazinePicture"> <a href="@mag.Url"> <img class="magazineImg" src="@magazineImage.umbracoFile" /> </a> </div> @* HER KAN ARTIKLER FOR ET GIVET MAGASIN SKRIVES UD *@ @foreach (var article in mag.Children) { @article.Name } </div> </li> </div> } i++; } </ul> </div> </div> <div class="fadeout"></div> <a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a> <a data-slide="next" href="#myCarousel" class="right carousel-control">›</a> </div> </div> }
Im getting this error: Error loading Partial View script (file: ~/Views/MacroPartials/FrontPageMagazine.cshtml)
Hi Nicolai,
You made mistake in this line :
@foreach (var mag in magazinesMonths.Take(2))
'magazineMonths' - no such variable in the view, should be 'magazinesMonths'
Thanks, Alex
So simple! I was looking blind on this code :)
Thanks alot Alex
- Do you know how I could create data-slide-to from the amount of magazines I have?
Say:
<ol class="carousel-indicators"> @foreach (var mag in magazinesMonths) { if (i == 0) { <li data-target="#magazineCarousel" data-slide-to="0" class="active"></li> } else { <li data-target="#magazineCarousel" data-slide-to="@i"></li> } i++; } </ol>
This is unfortunately not working and I dont know why?
What error do you have ? Can you look at logs ?
It does not give me any error but its like the carousel is reading input wrong.
So full code is now:
<div class="carousel slide" id="magazineCarousel" data-ride="carousel"> <ol class="carousel-indicators"> @foreach (var mag in magazinesMonths) { <li data-target="#magazineCarousel" data-slide-to="@i" { if i==0 { class="active" } }></li> i++; } </ol> <div style="width: 100%"> <div class="carousel-inner"> <ul class="thumbnails"> @foreach (var mag in magazinesMonths) { var magazineImage = Umbraco.Media(mag.magazineFrontpageImage); int countArticles = mag.Children.Count(); if (i < 1) { <div class="item active"> <li> <div class="thumbnail" id="magazineSlider"> <div class="magazineMonth"> <p style="text-transform: capitalize;">@mag.magazineDate.ToString("MMMM") magasinet</p> </div> <div class="magazineTitle"> <p> <a href="@mag.Url"><span>Se Magasin »</span><span class='spacer'></span></a> </p> </div> <div class="magazinePicture"> <a href="@mag.Url"> <img class="magazineImg" src="@magazineImage.umbracoFile" /> </a> </div> @* HER KAN ARTIKLER FOR ET GIVET MAGASIN SKRIVES UD *@ @foreach (var article in mag.Children) { @article.Name } </div> </li> </div> } else { <div class="item"> <li> <div class="thumbnail" id="magazineSlider"> <div class="magazineMonth"> <p style="text-transform: capitalize;">@mag.magazineDate.ToString("MMMM") magasinet</p> </div> <div class="magazineTitle"> <p> <a href="@mag.Url"><span>Se Magasin »</span><span class='spacer'></span></a> </p> </div> <div class="magazinePicture"> <a href="@mag.Url"> <img class="magazineImg" src="@magazineImage.umbracoFile" /> </a> </div> @* HER KAN ARTIKLER FOR ET GIVET MAGASIN SKRIVES UD *@ @foreach (var article in mag.Children) { @article.Name } </div> </li> </div> } i++; } </ul> </div> </div> <div class="fadeout"></div> </div> <a data-slide="prev" href="#magazineCarousel" class="left carousel-control">‹</a> <a data-slide="next" href="#magazineCarousel" class="right carousel-control">›</a>
is working on a reply...
Write your reply to:
Upload image
Image will be uploaded when post is submitted
Carousel in Partial View doesnt work
Hey guys,
Im trying to implement a carousel inside my view but im doing something wrong. Can anyone help?
Im getting this error: Error loading Partial View script (file: ~/Views/MacroPartials/FrontPageMagazine.cshtml)
Hi Nicolai,
You made mistake in this line :
'magazineMonths' - no such variable in the view, should be 'magazinesMonths'
Thanks, Alex
So simple! I was looking blind on this code :)
Thanks alot Alex
- Do you know how I could create data-slide-to from the amount of magazines I have?
Say:
This is unfortunately not working and I dont know why?
What error do you have ? Can you look at logs ?
It does not give me any error but its like the carousel is reading input wrong.
So full code is now:
is working on a reply...