Draft: Fix Variable Width Scrolling with CSS Gutters

demo/components/demos/responsive/variable-width.vue

@@ -1,11 +1,7 @@
 <template>
-
-<ssr-carousel
-	data-cy='variable-width'
-	:slides-per-page='null'>
-  <slide :index='1' :style='{ width: "65%", height: "30vw"}'></slide>
-  <slide :index='2' :style='{ width: "50%", height: "30vw"}'></slide>
-  <slide :index='3' :style='{ width: "30%", height: "30vw"}'></slide>
-</ssr-carousel>
-
+  <ssr-carousel data-cy="variable-width" :slides-per-page="null" gutter="1rem">
+    <slide :index="1" :style="{ width: '65%', height: '30vw' }"></slide>
+    <slide :index="2" :style="{ width: '50%', height: '30vw' }"></slide>
+    <slide :index="3" :style="{ width: '30%', height: '30vw' }"></slide>
+  </ssr-carousel>
 </template>

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

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

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
 

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
 					}
 				]
 			, [] )