How to make a carousel out of this?

Question

PHP

there is a code that displays price cards loaded from the database, but they are displayed in rows and eventually fill the page. Tell me how to make a carousel of 3 elements with scrolling for such a design?

<section id="section-pricing" class="section-pricing">
  <div class="section-content">
    <div class="container">

      <?php if ( ! is_page_template( 'template-pricing.php' ) ) { get_template_part( 'partials/pagehead', 'pricing' ); } ?>

      
      
      <div class="row">

      <?php $pricing_packs = shuttea_get_option('pricing_pack');
        $i = 0;
        foreach ($pricing_packs as $pricing_pack) {
          if ( $pricing_pack["title"] && $pricing_pack["price"] && $pricing_pack["options"] ) { $i++;};
        }
        if ( $i < 3 ) { $col_width = 12 / $i; } else { $col_width = 4; } ?>

      <?php foreach ($pricing_packs as $pricing_pack) { 
        if ($pricing_pack["title"] && $pricing_pack["price"] && $pricing_pack["options"]) {
          echo '<!-- pricing table -->';
            echo '<div class="col-md-'. $col_width .' col-sm-6">'; ?>
              <div data-os-animation="fadeIn" data-os-animation-delay="0.3s" class="pricing-table os-animation">
                <!-- pricing table heading-->
                <div class="pricing-table-head">
                  <div class="pricing-table-heading">
                    <div class="option-name-wrapper"><span class="option-name"><?php esc_html_e('','shuttea'); ?></span></div>
                    <div class="option-value-wrapper"><span class="option-value"><?php echo esc_attr($pricing_pack["title"]); ?></span></div>
                  </div>
                  <div class="pricing-table-tariff">
                    <div class="option-rating-wrapper"><span class="option-rating rating-s"></span></div>
                    <div class="option-cost-wrapper"><span class="option-cost"><?php echo esc_attr($pricing_pack["price"]); ?></span></div>
                  </div>
                </div>
                <!-- END pricing table heading-->
                <!-- pricing table content-->
                <div class="pricing-table-content">
                  <ul class="list-pricing-features">
                    <?php foreach ( $pricing_pack["options"] as $pack_option ) { ?>
                      <li>- <?php echo esc_attr($pack_option); ?></li>
                    <?php } ?>
                  </ul>
                </div>
                <!-- END pricing table content--><a href="#" data-toggle="modal" data-target="#formModal" class="btn btn-cta"><?php esc_html_e('Заказать','shuttea'); ?></a>
              </div>
            </div>
          <!-- END pricing table -->
        <?php } ?>
        <?php } ?>

      </div>
    </div>
  </div>
</section>

The code is implemented on the website mekegood.group on the main page, section "Prices".

Answer 1

Post it on jsfiddle or codepen so you can poke it.
You can get the carousel here: flexslider.woothemes.com/basic-carousel.html
Adapt your html to it and you'll be fine.