<?php
$sql_index_gal = db_query("SELECT * FROM tbl_category WHERE category_for_gallery='Yes' AND category_status='Active' ORDER BY category_order_by ASC");

if (mysqli_num_rows($sql_index_gal) > 0) {
?>

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-12 col-centered">
      <div id="carousel" class="carousel slide" data-ride="carousel" data-type="multi" data-interval="2500">
        <div class="carousel-inner">
          <?php
          $isFirst = true;
          while ($INDEXGAL_DATA = mysqli_fetch_array($sql_index_gal)) {
            $activeClass = $isFirst ? 'active' : '';
            $isFirst = false;
          ?>
            <div class="item <?= $activeClass ?>">
              <div class="carousel-col">
                <a href="<?= $site_url ?>/<?= $INDEXGAL_DATA['category_url'] ?>.html" class="portfolio-img-link mdl-js-ripple-effect mdl-button--accent">
                  <img src="<?= $site_url ?>/uploaded_files/<?= $INDEXGAL_DATA['category_image_name'] ?>" 
                       alt="<?= ($INDEXGAL_DATA['category_is_product'] == 'Yes') ? 'Manufacturers Exporters and Wholesale Suppliers of ' . $INDEXGAL_DATA['category_name'] . ' ' . $compDATA['admin_city'] . ' ' . $compDATA['admin_state'] : 'Service Provider of ' . $INDEXGAL_DATA['category_name'] . ' ' . $compDATA['admin_city'] . ' ' . $compDATA['admin_state']; ?>" 
                       title="<?= ($INDEXGAL_DATA['category_is_product'] == 'Yes') ? 'Manufacturers Exporters and Wholesale Suppliers of ' . $INDEXGAL_DATA['category_name'] . ' ' . $compDATA['admin_city'] . ' ' . $compDATA['admin_state'] : 'Service Provider of ' . $INDEXGAL_DATA['category_name'] . ' ' . $compDATA['admin_city'] . ' ' . $compDATA['admin_state']; ?>" 
                       class="block img-responsive" 
                       style="width:280px; height:220px;" />
                </a>
              </div>
            </div>
          <?php
          }
          ?>
        </div>

        <!-- Controls -->
        <div class="left carousel-control">
          <a href="#carousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
        </div>
        <div class="right carousel-control">
          <a href="#carousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<?php
}
?>
<style>
    .col-centered {
    float: none;
    margin: 0 auto;
}

.carousel-control { 
    width: 8%;
    width: 0px;
}
.carousel-control.left,
.carousel-control.right { 
    margin-right: 40px;
    margin-left: 32px; 
    background-image: none;
    opacity: 1;
}
.carousel-control > a > span {
    color: white;
	  font-size: 29px !important;
}

.carousel-col { 
    position: relative; 
    min-height: 1px; 
    padding: 5px; 
    float: left;
 }

 .active > div { display:none; }
 .active > div:first-child { display:block; }

/*xs*/
@media (max-width: 767px) {
  .carousel-inner .active.left { left: -50%; }
  .carousel-inner .active.right { left: 50%; }
	.carousel-inner .next        { left:  50%; }
	.carousel-inner .prev		     { left: -50%; }
  .carousel-col                { width: 50%; }
	.active > div:first-child + div { display:block; }
}

/*sm*/
@media (min-width: 768px) and (max-width: 991px) {
  .carousel-inner .active.left { left: -50%; }
  .carousel-inner .active.right { left: 50%; }
	.carousel-inner .next        { left:  50%; }
	.carousel-inner .prev		     { left: -50%; }
  .carousel-col                { width: 50%; }
	.active > div:first-child + div { display:block; }
}

/*md*/
@media (min-width: 992px) and (max-width: 1199px) {
  .carousel-inner .active.left { left: -33%; }
  .carousel-inner .active.right { left: 33%; }
	.carousel-inner .next        { left:  33%; }
	.carousel-inner .prev		     { left: -33%; }
  .carousel-col                { width: 33%; }
	.active > div:first-child + div { display:block; }
  .active > div:first-child + div + div { display:block; }
}

/*lg*/
@media (min-width: 1200px) {
  .carousel-inner .active.left { left: -25%; }
  .carousel-inner .active.right{ left:  25%; }
	.carousel-inner .next        { left:  25%; }
	.carousel-inner .prev		     { left: -25%; }
  .carousel-col                { width: 25%; }
	.active > div:first-child + div { display:block; }
  .active > div:first-child + div + div { display:block; }
	.active > div:first-child + div + div + div { display:block; }
}

.block {
	width: 306px;
	height: 230px;
}

.red {background: red;}

.blue {background: blue;}

.green {background: green;}

.yellow {background: yellow;}
</style>
<script>
    $('.carousel[data-type="multi"] .item').each(function() {
	var next = $(this).next();
	if (!next.length) {
		next = $(this).siblings(':first');
	}
	next.children(':first-child').clone().appendTo($(this));

	for (var i = 0; i < 2; i++) {
		next = next.next();
		if (!next.length) {
			next = $(this).siblings(':first');
		}

		next.children(':first-child').clone().appendTo($(this));
	}
});
</script>