Featured Products Scrolling

[marshallw]

This may have been mentioned before, But I would like to have the featured products list stay one line but scroll slowly like the slider on the home page. Is there already some built in JS for this?

Thanks

[lesliekirk]

This may have been mentioned before, But I would like to have the featured products list stay one line but scroll slowly like the slider on the home page. Is there already some built in JS for this?

Thanks

Trying resurrect this old post - I'm needing a bootstrap carousel/slider for something like the featured products too. Something that will scroll maybe 8 small thumbnails.

[razertip]

These might work.

https://getbootstrap.com/javascript/#carousel

http://bootstrapbay.com/blog/bootstr...usel-tutorial/

[lesliekirk]

These might work.

https://getbootstrap.com/javascript/#carousel

http://bootstrapbay.com/blog/bootstr...usel-tutorial/

Sadly no. These are perfect for single slides. I need to display 8 product thumbnails in a single row and then be able to slide to the next row. I can do this outside of Miva, my issue is with the foreach loop and the item tag.

[razertip]

Use a counter on the foreach loop and if the counter equals 1 then set the item tag as active, if not then set it as a plain item tag.

Use the following on a test page. I used the main image (4 mages at full screen) and you will have to play with the CSS @media.

  <h1>Featured Product</h1>
<!--Begin carousel-->
<div class="carouselcontainer text-center">
      <div class="carousel slide row" data-ride="carousel" data-type="multi" data-interval="false" id="featuredcarousel">
        <div class="carousel-inner">
                <mvt:assign name="g.counter" value="1" />
                   <mvt:foreach iterator="product" array="featured_products:products">
                    <mvt:if expr="g.counter EQ 1">
                        <div class="item active">
                    <mvt:else>
                        <div class="item">
                    </mvt:if>
            <div class="col-md-3 col-sm-4 col-xs-12"><a href="&mvte:product:link;"><img src="&mvte:product:imagetypes:main;" class="img-responsive"></a></div>
                        </div>
                    <mvt:assign name="g.counter" value="g.counter + 1" />
                </mvt:foreach>
            </div>
    <a class="left carousel-control" href="#featuredcarousel" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
    <a class="right carousel-control" href="#featuredcarousel" data-slide="next"><i class="fa fa-chevron-right"></i></a>
        </div>
    </div>
</div>
<!--End carousel-->

Add this CSS to your test page:

<style>
.carouselcontainer {
   margin:  20px 20px 20px 40px;
}
.carousel-control.left, .carousel-control.right {
  background-image:none;
  top: 50%;
  color: #000;
  width: 5%;
}
@media (min-width: 992px ) {
  .carousel-inner .active.left {
    left: -25%;
  }
  .carousel-inner .next {
    left:  25%;
  }
  .carousel-inner .prev {
    left: -25%;
  }
}
@media (min-width: 768px) and (max-width: 991px ) {
  .carousel-inner .active.left {
    left: -33.3%;
  }
  .carousel-inner .next {
    left:  33.3%;
  }
  .carousel-inner .prev {
    left: -33.3%;
  }
  .active > div:first-child {
    display:block;
  }
  .active > div:first-child + div {
    display:block;
  }
  .active > div:last-child {
    display:none;
  }
}
@media (max-width: 767px) {
  .carousel-inner .active.left {
    left: -100%;
  }
  .carousel-inner .next {
    left:  100%;
  }
  .carousel-inner .prev {
    left: -100%;
  }
  .active > div {
    display:none;
  }
  .active > div:first-child {
    display:block;
  }
}
</style>

This as well at the bottom of the page:

<script>
jQuery(document).ready(function() {

  jQuery('.carousel[data-type="multi"] .item').each(function(){
    var next = jQuery(this).next();
    if (!next.length) {
      next = jQuery(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo(jQuery(this));

    for (var i=0;i<2;i++) {
      next=next.next();
      if (!next.length) {
        next = jQuery(this).siblings(':first');
      }
      next.children(':first-child').clone().appendTo($(this));
    }
  });

});
</script>