Twitter Bootstrap Question posted in

Twitter bootstrap – Add active Class for each img element

I’m using Twitter Bootstrap , I want to add the active class in my for loop, found some articles with <nav> element but I still couldn’t get it to work.
Here is my code:

<?php

    $tablename = "banners";
    $type= 'slider';

    $displayBanner = new Display($tablename);
    $BannerDataDisplay = $displayBanner->getAllDataByStatusType($type);
    //`id`, `bannerName`, `bannerURL`, `status`, `createdBy`, `CreatedDate`
    //var_dump($BannerDataDisplay);
    echo '
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
    ';

    for($i=0;$i<count($BannerDataDisplay);$i++){
        echo' <div class="item active">
        <img src="app/'.$BannerDataDisplay[$i]['bannerURL'].'" alt="Slide">
      </div>';
    }

    echo '
        </div>
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    ';
?>

PS: If you can solve this, please use this variable: $BannerDataDisplay[$i]['bannerURL'] <- that is the url of my image

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    OK i Solved it , had to search some related articles mostly from Wordpress:

    for ($i=0; $i < count($BannerDataDisplay); $i++) {
if ($i==0) {
    echo ' <div class="item active">
        <img src="app/' . $BannerDataDisplay[$i]['bannerURL'] . '" alt="Slide">
      </div>';
} else {
    echo '<div class="item">
        <img src="app/' . $BannerDataDisplay[$i]['bannerURL'] . '" alt="Slide">
      </div>';
}

    }


  2. 0 
    For current image here you go:
$('.sliderTrigger').on('click', function() {
    var index = $(this).attr('data-slide-to');
    console.log(index);
    $('#myGallery .carousel-inner .item').removeClass('active');
    $('#myGallery .carousel-inner .item').each(function(i,element) {
        console.log(i)
        if(i == index) {
            $(this).addClass('active');
        }
    })
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search