Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • David Hammer 41 posts 67 karma points
    Nov 14, 2013 @ 13:42
    David Hammer
    0

    Bootstrap Carousel Active Problem

    Hey guys.

    I have seen there has been other topics like this, but they're mostly aiming towards XSLT.

    I think there is a simple solution, but I can't seem to wrap my head around how to implement it, and I very much hope, that you guys can help me out.

    Here it goes:

    I "simply" need to have the 'active' class on only the first of the items, seeing as it should add it to the rest on slide.

    Heres my code so far:

    @inherits umbraco.MacroEngines.DynamicNodeContext
    
    @{
      var sliderItems = Model.AncestorOrSelf(1).DescendantsOrSelf("FrontpageSliderItems").First();
     <div id="myCarousel" class="carousel slide">
    
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    
      <div class="carousel-inner">
        @foreach (var item in sliderItems.Children.OrderBy("Id desc").Take(3))
        {
          var magazine = item.NodeById(item.frontpageSliderItemId);
          <div class="item active">
            <div class="container">
              <div class="carousel-caption">
                <h1>@magazine.magazineTitle</h1>
                @if (@magazine.magazineTeaser.ToString().Length > 100)
                {
                  <p><a href="@magazine.Url">
                 @Html.Raw(@magazine.magazineTeaser.ToString().Substring(0, 100))
                   <text>...</text></a></p>
                }
                <p><a class="btn btn-large btn-primary" href="@magazine.Url">Read more</a></p>
              </div>
            </div>
          </div>
        }
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
             <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
             <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
     </div>
     }
    

    Right now it shows 3 items on top of eachother (of course), and every data pull-out works, so it's actually only the active functionality I'm looking for.. :-) Also: If you guys have any recommendations / objections towards how I have coded this, please speak up. I'm still new, I have to learn.

    //Kind Regards

  • Michael Warnes 1 post 21 karma points
    Nov 24, 2013 @ 00:55
    Michael Warnes
    0

    Hi, you need to add a counter to your macro which only adds the active class in the first loop, something like this

     

    inherits umbraco.MacroEngines.DynamicNodeContext

    @{
     
    var sliderItems =Model.AncestorOrSelf(1).DescendantsOrSelf("FrontpageSliderItems").First();
     
    <div id="myCarousel"class="carousel slide">

    <ol class="carousel-indicators">
     
    <li data-target="#myCarousel" data-slide-to="0"class="active"></li>
     
    <li data-target="#myCarousel" data-slide-to="1"></li>
     
    <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

      <div class="carousel-inner">
    int mycounter=0;

        @foreach (var item in sliderItems.Children.OrderBy("Id desc").Take(3))
        {
          var magazine = item.NodeById(item.frontpageSliderItemId);
    if(mycounter==){@:<div class="item active">}else{@:<div class="item">}

         
            <div class="container">
              <div class="carousel-caption">
                <h1>@magazine.magazineTitle</
    h1>
               
    @if(@magazine.magazineTeaser.ToString().Length>100)
               
    {
                 
    <p><a href="@magazine.Url">
                 
    @Html.Raw(@magazine.magazineTeaser.ToString().Substring(0,100))
                   
    <text>...</text></a></p>
               
    }
               
    <p><a class="btn btn-large btn-primary" href="@magazine.Url">Read more</a></p>
             
    </div>
            </
    div>
          @:
    </div>
    mycounter++;
        }
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
             <span class="glyphicon glyphicon-chevron-left"></
    span>
       
    </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
             <span class="glyphicon glyphicon-chevron-right"></
    span>
       
    </a>
    </
    div>
     
    </div>
     
    }


    Hope this helps,

    Regards

    Mike

Please Sign in or register to post replies

Write your reply to:

Draft