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

  • 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.

Please Sign in or register to post replies