How to make a scrolling carousel in Blockshop theme?

Highlighted
Tourist
13 0 2

SITE: https://hue.ph/collections/sandals/products/celeste-black
THEME: Blockshop 5.5.3

In this site, we have a carousel section named, 'A Story of Quality' below the product information. It has a total of 6 images and I want it to scroll in a loop one at a time and not by three's.
What I mean by not by three is, when I scroll next or prev, only one image will be scrolled next or previously NOT three images. But the layout should still be like this, divided by three.

Screenshot_1.png
Any ideas on how to implement that? Here is the code for this page:

 

<script>// <![CDATA[
window.console = window.console || function(t) {};
// ]]></script>
<script>// <![CDATA[
if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
// ]]></script>
<div class="text-center">
<h3 id="idStoryQuality">A Story of Quality</h3>
</div>
<div class="container" id="containerSlider">
  <div class="row multi-slider">
    <div class="">
      <div class="carousel carousel-showmanymoveone slide multi-item-carousel" id="theCarousel">
        <div class="carousel-inner">
          <div class="item active">
            <div class="col-xs-12 col-md-4">
            <div class="astory-icons"><img src="https://cdn.shopify.com/s/files/1/2664/0628/files/softech.png?v=1590469953" class="img-responsive" /></div>
            <div class="slider-desc">
            <div class="slider-cont">
            <p>Softech® Insole absorbs shock and distributes pressure over the entire foot.</p>
            </div>
            </div>
            </div>

            <div class="col-xs-12 col-md-4">
            <div class="astory-icons"><img src="https://cdn.shopify.com/s/files/1/2664/0628/files/premium.png?v=1590469953" class="img-responsive" /></div>
            <div class="slider-desc">
            <div class="slider-cont">
            <p>For women who value quality above all else, never sacrifice function for fashion.</p>
            </div>
            </div>
            </div>

            <div class="col-xs-12 col-md-4">
            <div class="astory-icons"><img src="https://cdn.shopify.com/s/files/1/2664/0628/files/coufit.png?v=1590469953" class="img-responsive" /></div>
            <div class="slider-desc">
            <div class="slider-cont">
            <p>After years of research and development HUE came up with an innovative idea that contours your feet for support and perfect shape.</p>
            </div>
            </div>
            </div>
          </div> <!-- end of item -->
          <div class="item">
            <div class="col-xs-12 col-md-4">
            <div class="astory-icons"><img src="https://cdn.shopify.com/s/files/1/2664/0628/files/huecore.png?v=1590469953" /></div>
            <div class="slider-desc">
            <div class="slider-cont">
            <p>Hue's high standard and own technique which is the next level of artisanship that goes into the construction of each pair.</p>
            </div>
            </div>
            </div>

            <div class="col-xs-12 col-md-4">
            <div class="astory-icons"><img src="https://cdn.shopify.com/s/files/1/2664/0628/files/Artboard_1.png?v=1590469469" class="img-responsive" /></div>
            <div class="slider-desc">
            <div class="slider-cont">
            <p>We get you. That's why for every pair we create, we make sure that you can walk in it, ALL DAY EVERYDAY.</p>
            </div>
            </div>
            </div>

            <div class="col-xs-12 col-md-4">
            <div class="astory-icons"><img src="https://cdn.shopify.com/s/files/1/2664/0628/files/hyber-100.jpg?v=1590470802" class="img-responsive" /></div>
            <div class="slider-desc">
            <div class="slider-cont">
            <p>A custom high standard sole treatment which results to a revolutionary hybrid rubber that is durable, lightweight and built to move.</p>
            </div>
            </div>
            </div>
          </div> <!-- end of item -->
        </div><!--  end of carousel-inner -->
        <a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left" id="proSlideleft"></i></a> <a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right" id="proSlideright"></i></a>
       </div> <!-- end of carousel-showmanymoveone -->
    </div>
  </div> <!-- end of multi slider -->
</div> <!-- end of container slider -->
<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script id="rendered-js">// <![CDATA[
(function () {
  jQuery('#theCarousel').carousel();

})();

(function () {
  jQuery('.carousel-showmanymoveone .item').each(function () {
    var itemToClone = jQuery(this);

    for (var i = 1; i < 6; i++) {if (window.CP.shouldStopExecution(0)) break;
      itemToClone = itemToClone.next();

      // wrap around if at end of item collection
      if (!itemToClone.length) {
        itemToClone = jQuery(this).siblings(':first');
      }

      // grab item, clone, add marker class, add to collection
      itemToClone.children(':first-child').clone().
      addClass("cloneditem-" + i).
      appendTo(jQuery(this));
    }window.CP.exitedLoop(0);
  });
})();

(function () {
  jQuery('.carousel-showmanymoveone').carousel({
    interval: false });

})();
      //# sourceURL=pen.js
// ]]></script>

 


I'm new in programming in Shopify. I hope someone would help me with this or at least give me resources/references that can help me with the same problem. Thank you.


Novice Web Developer & Designer | Game Developer | Art Enthusiast
0 Likes