Author: | robertsmichaelj |
---|---|
Views Total: | 4,293 views |
Official Page: | Go to website |
Last Update: | January 19, 2019 |
License: | MIT |
Preview:

Description:
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