carousel in partial view doesnt work

Nicolai 48 posts 201 karma points

May 22, 2015 @ 10:54

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?

@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 &raquo</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 &raquo</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)

Copy Link

Alex Skrypnyk 6182 posts 24284 karma points MVP 8x admin c-trib

May 22, 2015 @ 11:26

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

Copy Link

Nicolai 48 posts 201 karma points

May 22, 2015 @ 16:10

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?

Copy Link

Alex Skrypnyk 6182 posts 24284 karma points MVP 8x admin c-trib

May 22, 2015 @ 16:17

What error do you have ? Can you look at logs ?

Copy Link

Nicolai 48 posts 201 karma points

May 22, 2015 @ 16:25

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 &raquo</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 &raquo</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>

Copy Link

is working on a reply...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Flag this post as spam?

Carousel in Partial View doesnt work