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>
Improve this question

2 Answers 2

Reset to default
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
1
  • Works smooth. no bouncing.
    – seeingis
    Apr 17, 2015 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
1
  • This one causes the each slide to bounce (reposition) as it become active.
    – seeingis
    Apr 17, 2015 at 15:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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