diff --git a/demo/components/demos/responsive/variable-width.vue b/demo/components/demos/responsive/variable-width.vue index 0fa1c8b..a6d4e59 100644 --- a/demo/components/demos/responsive/variable-width.vue +++ b/demo/components/demos/responsive/variable-width.vue @@ -1,11 +1,7 @@ diff --git a/src/concerns/dimensions.coffee b/src/concerns/dimensions.coffee index b06713c..7e27b55 100644 --- a/src/concerns/dimensions.coffee +++ b/src/concerns/dimensions.coffee @@ -33,7 +33,7 @@ export default # Calculate the width of the whole track from the slideWidth. trackWidth: -> - if @isVariableWidth + if @isVariableWidthWithPages then @measuredTrackWidth + @gutterWidth else @slideWidth * @slidesCount @@ -118,6 +118,6 @@ export default # Get the target X scroll position of a given slide targetXOfIdx: (idx) -> - if @isVariableWidth + if @isVariableWidthWithPages then @measuredSlidesWidths[idx].targetXScroll else @pageWidth / @currentSlidesPerPage diff --git a/src/concerns/dragging.coffee b/src/concerns/dragging.coffee index 4ebd3bb..53ab748 100644 --- a/src/concerns/dragging.coffee +++ b/src/concerns/dragging.coffee @@ -73,7 +73,7 @@ export default fractionalIndex: -> return 0 unless @trackWidth - if @isVariableWidth then return @fractionalIndexFromMeasurements + if @isVariableWidthWithPages then return @fractionalIndexFromMeasurements # Work in positive numbers x = @currentX * -1 @@ -153,7 +153,9 @@ export default else @gotoEnd() # If rendering variable width slides, don't come to a rest at an index - else if @isVariableWidth then @goto @dragIndex + else if @isVariableWidth + if (!!@showArrows or !!@showDots) then @goto @dragIndex + else @tweenToStop() # If user was vertically dragging, reset the index else if @isVerticalDrag then @goto @index diff --git a/src/concerns/pagination.coffee b/src/concerns/pagination.coffee index fe86a10..116dd77 100644 --- a/src/concerns/pagination.coffee +++ b/src/concerns/pagination.coffee @@ -23,7 +23,7 @@ export default # The current number of pages pages: -> switch # When variable width, pages is slide count - when @isVariableWidth then @slidesCount + when @isVariableWidthWithPages then @slidesCount # When looping and paginating per slide, make a dot per slide when @paginateBySlide and @shouldLoop then @slidesCount @@ -149,7 +149,7 @@ export default # Figure out the new x position x = switch - when @isVariableWidth then @targetXOfIdx(@applyIndexBoundaries(index)) * -1 + when @isVariableWidthWithPages then @targetXOfIdx(@applyIndexBoundaries(index)) * -1 when @paginateBySlide then index * @slideWidth * -1 else index * @pageWidth * -1 diff --git a/src/concerns/variable-width.coffee b/src/concerns/variable-width.coffee index 971031c..92c14cf 100644 --- a/src/concerns/variable-width.coffee +++ b/src/concerns/variable-width.coffee @@ -12,6 +12,9 @@ export default # Is the carousel in variable width mode isVariableWidth: -> @slidesPerPage == null + # Is the carousel in variable width mode and needs pagination + isVariableWidthWithPages: -> @isVariableWidth and (@showArrows or @showDots) + methods: # Capture all dimensions of carousel captureCarouselDims: -> @@ -31,7 +34,7 @@ export default ...acc { width: child.$el.clientWidth - targetXScroll: (acc[idx - 1]?.targetXScroll || 0) + (acc[idx - 1]?.width || 0) + @gutter * (idx > 0) + targetXScroll: (acc[idx - 1]?.targetXScroll || 0) + (acc[idx - 1]?.width || 0) + @gutter * (idx > 0) # This requires gutter to be a number, not a CSS value } ] , [] )