ExpressionEngine CMS
Open, Free, Amazing

Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

Bootstrap Carousel & EE entries via Modulus

May 06, 2014 3:54pm

Subscribe [1]
  • #1 / May 06, 2014 3:54pm

    iDzine

    2 posts

    Actually not an issue, but just some code I wanted to share to hopefully help others.
    I was looking for a way to implement multiple EE posts into a Bootstrap Carousel, but kept failing with the next ‘active item’ class not being properly assigned.
    Looked into the {Switch} operator, but also not getting the desired result.
    Then came out on a post suggesting a plugin called SurgerEE which is pretty cool, but then I discovered something similiar is built in as from EE 2.7.1 called the modulus % operator.

    My code:

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="active item">
          {exp:channel:entries channel="products" dynamic="on"}
            <div class="col-md-4">
              {product_thumbnail}
                <div class="carousel-caption">
           <h4>{product_price}</h4>
    <p>     </div><br />
        </div><br />
            {if count % 3 == 0 AND count <> total_results }  <!-- Every 3rd post will close the banner displayed and create an new div with the class item --><br />
              </div> <br />
              <div class="item"><br />
            {if:elseif count == total_results} <!-- If end of posts is reached, just close the item class--><br />
              </div><br />
            {/if}                 <br />
       {/exp:channel:entries}<br />
      </div><br />
      <a href="#carousel-example-generic%22class=%22left" class="left carousel-control">_   <span class="glyphicon glyphicon-chevron-left"></span>_  </a><br />
      <a href="#carousel-example-generic%22class=%22right" class="right carousel-control">_   <span class="glyphicon glyphicon-chevron-right"></span>_  </a><br />
     </div>

    This will result into a carousel with in this case 3 different entries from my ‘products’ channel and will create the next item class div with other entries until every post in the channel is processed.

    Cheers!

.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases