0

I am using bootstrap carousel with EE's Grid and the page is not displaying correctly. All 3 slides are displaying on top of each other. I think its the "active" class is being applied to each slide in each div. I think I need a conditional on the active class but I don't know how to do it.

here is the code:

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


            <div class="carousel-inner">
                  {exp:channel:entries channel="slider" {snp-disable}}  
                  {home_page_slider}
                <div class="item active"><img src="{home_page_slider:slider_image}" alt="Slide"></div>
                   {/home_page_slider}
                    {/exp:channel:entries}

             </div>


            <a href="#carousel-example" class="left carousel-control" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a href="#carousel-example" class="right carousel-control" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>


        </div>
0

Here's what I would do:

{exp:channel:entries channel="slider" {snp-disable}}
{if count == "1"}
<div class="carousel slide" data-ride="carousel" id="carousel-example">
        <ol class="carousel-indicators">
            <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example" data-slide-to="1"></li>
            <li data-target="#carousel-example" data-slide-to="2"></li>
        </ol>
<div class="carousel-inner">
{/if}

    {home_page_slider}
    <div class="item{if home_page_slider:count == "1"} active{/if}">
        <img src="{home_page_slider:slider_image}" alt="Slide">
    </div>
    {/home_page_slider}

{if count == total_results}
</div>
<a href="#carousel-example" class="left carousel-control" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a href="#carousel-example" class="right carousel-control" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
{/if}
{/exp:channel:entries}

That way if the entries loop fails to get your content, none of the carousel markup would display either

| improve this answer | |
  • Works smooth. no bouncing. – seeingis Apr 17 '15 at 15:37
0

Simply check the count and output the active class in the first item that you iterate:

{if home_page_slider:count == "1"}active{/if}

Or specifically using your example:

<div class="item{if home_page_slider:count == "1"} active{/if}">
| improve this answer | |
  • This one causes the each slide to bounce (reposition) as it become active. – seeingis Apr 17 '15 at 15:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.