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