Mobile-friendly Product Carousel In Vanilla JavaScript – Pint Slider

Pint Slider is a JavaScript plugin which lets you create a responsive, touch-enabled product slider/carousel inspired by Bodybuilding.com.

On mobile devices, the plugin will be initialized as a horizontal scroller/swiper where the users are able to scroll through products with touch swipe events.

How to use it:

To use this plugin, add the following JavaScript and CSS files to the webpage.

<link rel="stylesheet" href="css/pint-slider.min.css">
<script src="js/pint-slider.min.js"></script>

Add products information (product images, descriptions, action buttons) to the carousel.

<div class="marketing__Carousel">
  <div class="js__carousel__append">
    <div class="marketing__example__product">
      PRODUCT 1
    </div>
    <div class="marketing__example__product">
      PRODUCT 2
    </div>
    <div class="marketing__example__product">
      PRODUCT 3
    </div>
    <div class="marketing__example__product">
      PRODUCT 4
    </div>
    <div class="marketing__example__product">
      PRODUCT 5
    </div>
    ...
  </div>
</div>

Initialize the product carousel with default settings.

exampleInitialize = new Carousel({
  cellClass: ".marketing__example__product"
});

To config the product carousel, override the following settings as per your needs.

exampleInitialize = new Carousel({
  // where to append the carousel
  appendTo: ".js__carousel__append",
  // shows navigation arrows
  arrows: true,
  // enables autoplay
  autoplay: false,
  // select of product
  cellClass: ".product",
  // the number of products to show
  cellsToShow: 5,
  // padding on desktop
  desktopPadding: 15,
  // shows pagination bullets
  dots: true,
  // enables fadeIn effect
  fadeIn: true,
  // or "loose"
  images: "restrict",
  // max width
  maxWidth: "100%",
  // options for mobile swiper
  mobile: "touch",
  mobileAt: "1000px",
  mobilePadding: 5,
  // how many slides to scroll on each click
  slidesPerClick: 5,
  // transition speed in milliseconds
  transitionSpeed: 300
});

Changelog:

01/19/2019

• JS update