Is there a way to display multiple post in bootstrap carousel.

H‌ello, i am making a template that is like a product slider card with multiple item(eg. 3 products) in a row. But i do not know how to do that. So far this is what i have done. Currently my code only display 1 item in a row as it is the only one active. Is there a way to make 3 item active at the same time to display 3 products in a row?

<?php if (!empty($data)): ?>
<script>mw.require("<?php print $config['url_to_module']; ?>css/style.css"true); </script>

<?php $rand = 'item_carousel_'.$params['id']; $id = 'carousel_'.$params['id']; ?>
<div id="<?php print $id?>" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <?php $count = -1foreach($data  as $item): ?>
    <?php $count++; ?>
    <div class="carousel-item <?php if($count == 0){ print 'active ';} ?>">
      <div class="col-12 col-md-4">
        <div class="card mb-2">
          <?php if($item['tn_image']):  ?>
            <a href="<?php print $item['link'?>" class="post-list-item-img" style="background-image:url('<?php print $item['tn_image']; ?>')"> </a>
          <?php endif?>
          <div class="card-body">
            <h4 class="text-center card-title"><a href="<?php print $item['link'?>"><?php print $item['title'?></a></h4>
            <p class="card-text"><?php print $item['description']; ?></p>
    <?php endforeach ; ?>

   <a class="carousel-control-prev " href="#<?php print $id?>" role="button" data-slide="prev">
    <span class="fas fa-chevron-circle-left fa-2x" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>

  <a class="carousel-control-next" href="#<?php print $id?>" role="button" data-slide="next">
    <span class="fas fa-chevron-circle-right fa-2x" aria-hidden="true"></span>
    <span class="sr-only">Next</span>



<?php else : ?>

<?php endif?>

You must be logged in to reply on this thread

Sign Up

100 new templates are comming
in the new year!

Subscribe now and we will send you an email immediately
when the release new template.

Subscribe For New Templates