skip to Main Content

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:


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

    $displayBanner = new Display($tablename);
    $BannerDataDisplay = $displayBanner->getAllDataByStatusType($type);
    //`id`, `bannerName`, `bannerURL`, `status`, `createdBy`, `CreatedDate`
    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>
        <div class="carousel-inner" role="listbox">

        echo' <div class="item active">
        <img src="app/'.$BannerDataDisplay[$i]['bannerURL'].'" alt="Slide">

    echo '
        <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 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>

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



  1. Chosen as BEST ANSWER

    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">
    } else {
        echo '<div class="item">
            <img src="app/' . $BannerDataDisplay[$i]['bannerURL'] . '" alt="Slide">


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