Продукт Carousal для настольных и мобильных устройств? (Css, Javascript, html)

Question

Я пытаюсь устроить праздник по продукту. Я использовал swiper. js, но он не работает. У меня есть набор из 4 продуктов, показанных подряд, и я хочу устроить праздник для мобильных устройств, имея только 1 продукт в одном ряду, и проведите пальцем, чтобы увидеть другие. Вот мой код

<div class="row mt-5">
    <?php if ($wc_query->have_posts()) : ?>
      <div class="swiper-container">
         <div class="swiper-wrapper">
        <?php while ($wc_query->have_posts()) :
                $wc_query->the_post(); ?>
        <div class="swiper-slide mob mx-auto col-md-2">
            <div class="border-box">
                <?php the_post_thumbnail(); ?>
            </div>
            <center><h3 class="box-bottom"><a href="<?php the_permalink(); ?>"><?php the_title(); ?><h3>PKR:<?php echo                  $product->get_price();?></a></h3></h3></center>
        </div>
        <?php endwhile; ?>
        <?php wp_reset_postdata(); ?>
        </div>
        </div>
        <?php else:  ?>
        <li>
        <?php _e( 'No Products' ); ?>
        </li>
        <?php endif; ?> 
      </div>

JS КОД

  var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'horizontal',
loop: true,

// Navigation arrows
navigation: {
  nextEl: '.swiper-button-next',
  prevEl: '.swiper-button-prev',
},

// And if we need scrollbar
scrollbar: {
  el: '.swiper-scrollbar',
},

})