feat(): Introduce option

package.json

@@ -1,6 +1,6 @@
 {
  "name": "@glidejs/glide",
- "version": "3.3.0",
+ "version": "3.4.0",
  "description": "Glide.js is a dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more",
  "author": "Jędrzej Chałubek <[email protected]> (http:https://jedrzejchalubek.com/)",
  "homepage": "https://glidejs.com",

src/components/clones.js

@@ -20,15 +20,15 @@ export default function (Glide, Components, Events) {
  */
  collect (items = []) {
  let { slides } = Components.Html
- let { perView, classes } = Glide.settings
+ let { perView, classes, cloningRatio } = Glide.settings
 
  if (slides.length !== 0) {
  const peekIncrementer = +!!Glide.settings.peek
  const cloneCount = perView + peekIncrementer + Math.round(perView / 2)
  const append = slides.slice(0, cloneCount).reverse()
  const prepend = slides.slice(cloneCount * -1)
 
- for (let r = 0; r < Math.max(1, Math.floor(perView / slides.length)); r++) {
+ for (let r = 0; r < Math.max(cloningRatio, Math.floor(perView / slides.length)); r++) {
  for (let i = 0; i < append.length; i++) {
  let clone = append[i].cloneNode(true)
 

src/defaults.js

@@ -179,6 +179,13 @@ export default {
  */
  peek: 0,
 
+ /**
+ * Defines how many clones of current viewport will be generated.
+ *
+ * @type {Number}
+ */
+ cloningRatio: 1,
+
  /**
  * Collection of options applied at specified media breakpoints.
  * For example: display two slides per view under 800px.

tests/functional/carousel.test.js

@@ -85,4 +85,22 @@ describe('Glide initialized as `carousel`', () => {
 
  glide.mount()
  })
+
+ test('with even number of `perView` slides should create cloning buffer advanced by `cloningRatio`', (done) => {
+ let glide = new Glide('#glide', {
+ type: 'carousel',
+ perView: 2,
+ cloningRatio: 2,
+ })
+
+ glide.on('build.after', () => {
+ let { clones } = query(document)
+
+ expect(clones.length).toBe(12)
+
+ done()
+ })
+
+ glide.mount()
+ })
 })