diff --git a/README.md b/README.md
index b6b4903..de7ac88 100644
--- a/README.md
+++ b/README.md
@@ -35,6 +35,7 @@ For more examples, see the demo: https://vue-ssr-carousel.netlify.app.
 - `slides-per-page` (`1`) - How many slides are shown per page.
 - `gutter` (`20`) - The size of the space between slides.  This can a number or any CSS resolvable string. See https://vue-ssr-carousel.netlify.app/gutters.
 - `responsive` (`[]`) - Adjust settings at breakpoints. See https://vue-ssr-carousel.netlify.app/responsive.
+- `loop` (`false`) - Boolean to enable looping / infinite scroll.
 - `paginate-by-slide` (`false`) - When `false`, dragging the carousel or interacting with the arrows will advance a full page of slides at a time.  When `true`, the carousel will come to a rest at each slide.
 - `show-arrows` (`false`) - Whether to show back/forward arrows. See https://vue-ssr-carousel.netlify.app/ui.
 - `show-dots` (`false`) - Whether to show dot style pagination dots. See https://vue-ssr-carousel.netlify.app/ui.
diff --git a/demo/components/layout/nav.vue b/demo/components/layout/nav.vue
index 2815e56..a769086 100644
--- a/demo/components/layout/nav.vue
+++ b/demo/components/layout/nav.vue
@@ -19,6 +19,7 @@ export default
 		{ title: 'Responsive', path: '/responsive' }
 		{ title: 'Gutters', path: '/gutters' }
 		{ title: 'UI', path: '/ui' }
+		{ title: 'Looping', path: '/looping' }
 		{ title: 'Miscellaneous', path: '/misc' }
 	]
 
diff --git a/demo/components/slide.vue b/demo/components/slide.vue
index 20bc501..eda81b8 100644
--- a/demo/components/slide.vue
+++ b/demo/components/slide.vue
@@ -3,7 +3,7 @@
 <template lang='pug'>
 
 .slide: div
-	.title Slide {{ index }}
+	.title(v-if='index') Slide {{ index }}
 	slot
 
 </template>
@@ -36,6 +36,8 @@ export default
 	flex-center()
 	text-align center
 	fluid-space padding 's'
+	> div
+		width 100%
 
 // Increase slide text size
 .title
diff --git a/demo/content/looping.md b/demo/content/looping.md
new file mode 100644
index 0000000..dda2a16
--- /dev/null
+++ b/demo/content/looping.md
@@ -0,0 +1,79 @@
+---
+title: 'Looping'
+---
+
+## Basic looping
+
+Looping is also known as `wrapAround` or `infinite` in other carousels.
+
+<ssr-carousel :slides-per-page='1' loop show-dots show-arrows>
+  <slide :index='1'></slide>
+  <slide :index='2'></slide>
+  <slide :index='3'></slide>
+</ssr-carousel>
+
+```vue
+<ssr-carousel :slides-per-page='1' loop show-dots show-arrows>
+  <slide :index='1'></slide>
+  <slide :index='2'></slide>
+  <slide :index='3'></slide>
+</ssr-carousel>
+```
+
+## Looping with multiple slides per page
+
+Note how the incomplete 2nd page is handled.  The 3rd and 1st slide are shown simulataneously. On the next advance forward, the track advances a half width so that the *new* first page contains the 1st and 2nd slide.
+
+<ssr-carousel :slides-per-page='2' loop show-dots show-arrows>
+  <slide :index='1'></slide>
+  <slide :index='2'></slide>
+  <slide :index='3'></slide>
+</ssr-carousel>
+
+```vue
+<ssr-carousel :slides-per-page='2' loop show-dots show-arrows>
+  <slide :index='1'></slide>
+  <slide :index='2'></slide>
+  <slide :index='3'></slide>
+</ssr-carousel>
+```
+
+## Cloned slides can contain components
+
+In this case, we're using [vue-visual](https://github.com/BKWLD/vue-visual) components to render image assets.  Note how lazy loading prevents the loading of the second image until you advance forward.
+
+<ssr-carousel :slides-per-page='1' loop>
+  <slide>
+    <visual
+      image='https://via.placeholder.com/1920x1080?text=Slide+1'
+      lazyload
+      :aspect='16/9'>
+    </visual>
+  </slide>
+  <slide>
+    <visual
+      image='https://via.placeholder.com/1920x1080?text=Slide+2'
+      lazyload
+      :aspect='16/9'>
+    </visual>
+  </slide>
+</ssr-carousel>
+
+```vue
+<ssr-carousel :slides-per-page='1' loop>
+  <slide>
+    <visual
+      image='https://via.placeholder.com/1920x1080?text=Slide+1'
+      lazyload
+      :aspect='16/9'>
+    </visual>
+  </slide>
+  <slide>
+    <visual
+      image='https://via.placeholder.com/1920x1080?text=Slide+2'
+      lazyload
+      :aspect='16/9'>
+    </visual>
+  </slide>
+</ssr-carousel>
+```
diff --git a/demo/package.json b/demo/package.json
index 34ab1bf..6202400 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -21,6 +21,7 @@
 		"prism-themes": "^1.9.0",
 		"vue-balance-text": "^1.2.3",
 		"vue-detachable-header": "^0.2.0",
-		"vue-unorphan": "^1.2.3"
+		"vue-unorphan": "^1.2.3",
+		"vue-visual": "^2.6.0"
 	}
 }
diff --git a/demo/pages/_page.vue b/demo/pages/_page.vue
index 95f1a78..2c3a3bd 100644
--- a/demo/pages/_page.vue
+++ b/demo/pages/_page.vue
@@ -21,12 +21,14 @@ article
 <script lang='coffee'>
 import pageMixin from '@bkwld/cloak/mixins/page'
 import SsrCarousel from '../../src/ssr-carousel'
+import Visual from 'vue-visual'
+import 'vue-visual/index.css'
 
 export default
 	name: 'Page'
 	mixins: [ pageMixin ]
 
-	components: { SsrCarousel }
+	components: { SsrCarousel, Visual }
 
 	# Get Tower data
 	asyncData: ({ app, params, $content }) ->
@@ -78,8 +80,7 @@ h1
 
 // Seperate regions on a page
 h2
-	fluid-space margin-top, 'm'
-	fluid-space margin-bottom, 's'
+	fluid-space margin-top, 'l'
 	style-h2()
 
 // Syntax highlighting
@@ -87,9 +88,22 @@ h2
 	background darken(primary-background, 15%)
 	border 1px solid darken(primary-background, 30%)
 	basic-border-radius()
-	fluid-space margin-v, 's'
+	fluid-space margin-bottom, 's'
 >>> code
 	font-size 14px
 	line-height 1.2
 
+// Style body text, like notes
+p
+	line-height 1.5
+	color lighten(primary-background, 50%)
+
+	// Underline links
+	a
+		text-decoration underline
+
+// Add constant margins around demos
+.ssr-carousel
+	fluid-space margin-v, 's'
+
 </style>
diff --git a/demo/yarn.lock b/demo/yarn.lock
index 85d13b4..88ad16d 100644
--- a/demo/yarn.lock
+++ b/demo/yarn.lock
@@ -10574,10 +10574,10 @@ vue-unorphan@^1.2.3:
   dependencies:
     unorphan "^1.2.1"
 
-vue-visual@^2.0.0:
-  version "2.5.4"
-  resolved "https://registry.yarnpkg.com/vue-visual/-/vue-visual-2.5.4.tgz#3675bdea3a748bfc56775d88cdeaf27bd0f5e1c2"
-  integrity sha512-UUMxj0l9vPyR9W28y3g5eel4JsznuBgaqgEm8EhG/Vi2QVhhaDRsTUj0fkN++YcmwXt2iJcpewRDy6ITxQsHjQ==
+vue-visual@^2.0.0, vue-visual@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/vue-visual/-/vue-visual-2.6.0.tgz#083c6f83d755d59819db63e10ad249deef4da358"
+  integrity sha512-clCxWyA8YwjFOUSR+9vXXUomBto4v/+PqP/0DXtsIvOAACnKyDXtKRvHZzTY0EOfNinWZ/7NzTZ0aXgeYhJpVg==
 
 vue@^2.6.12:
   version "2.6.14"
diff --git a/src/concerns/dragging.coffee b/src/concerns/dragging.coffee
index 92cd67a..8635093 100644
--- a/src/concerns/dragging.coffee
+++ b/src/concerns/dragging.coffee
@@ -41,23 +41,28 @@ export default
 
 	computed:
 
-		# The current slide or page index. It rounds differently depedning on the
+		# The current slide or page index. It rounds differently depending on the
 		# direction of the velocity.  So that it eases to a stop in the direction
-		# the user was dragging
-		dragIndex: ->
-			fractionalIndex = Math.abs if @paginateBySlide
-			then @currentX / @slideWidth
-			else @currentX / @pageWidth
-			switch
+		# the user was dragging.
+		dragIndex: -> switch
 
-				# If there is very little velocity, go to the closet page
-				when Math.abs(@dragVelocity) <= 2 then Math.round fractionalIndex
+			# If there is very little velocity, go to the closet page
+			when Math.abs(@dragVelocity) <= 2 then Math.round @fractionalIndex
 
-				# User was moving forward
-				when @dragVelocity < 0 then Math.ceil fractionalIndex
+			# User was moving forward
+			when @dragVelocity < 0 then Math.ceil @fractionalIndex
 
-				# User was moving backward
-				else Math.floor fractionalIndex
+			# User was moving backward
+			else Math.floor @fractionalIndex
+
+		# Determine the current index given the currentX as a fraction. For
+		# instance, when dragging forward, it will be like 0.1 and when you've
+		# dragged almost a full page, forward it would be 0.9.
+		fractionalIndex: ->
+			x = @currentX - @currentIncompletePageOffset
+			if @paginateBySlide
+			then x / @slideWidth * -1
+			else x / @pageWidth * -1
 
 		# Calculate the width of a slide
 		slideWidth: -> @pageWidth / @currentSlidesPerPage
@@ -98,7 +103,7 @@ export default
 			else
 
 				# Tween so the track is in bounds if it was out
-				if @isOutOfBounds
+				if @isOutOfBounds and not @loop
 					@targetX = @applyXBoundaries @currentX
 					@startTweening()
 
@@ -171,12 +176,15 @@ export default
 
 		# Prevent dragging from exceeding the min/max edges
 		applyBoundaryDampening: (x) -> switch
+			when @loop then x # Don't apply dampening
 			when x > 0 then Math.pow x, @boundaryDampening
 			when x < @endX then @endX - Math.pow @endX - x, @boundaryDampening
 			else @applyXBoundaries x
 
 		# Constraint the x value to the min and max values
-		applyXBoundaries: (x) -> Math.max @endX, Math.min 0, x
+		applyXBoundaries: (x) ->
+			if @loop then x # Don't apply boundaries
+			else Math.max @endX, Math.min 0, x
 
 		# Prevent the anchors and images from being draggable (like via their
 		# ghost outlines). Using this approach because the draggable html attribute
diff --git a/src/concerns/looping.coffee b/src/concerns/looping.coffee
new file mode 100644
index 0000000..ec1db1c
--- /dev/null
+++ b/src/concerns/looping.coffee
@@ -0,0 +1,33 @@
+###
+Code related to looping / infinite scroll
+###
+export default
+
+	# Add prop to enable looping
+	props: loop: Boolean
+
+	computed:
+
+		# Put slides in order, applying rules related to looping
+		slides: ->
+
+			# If not looping, don't show other slides during boundary dampening
+			return @slottedSlides unless @loop
+
+			# Breakup the slides into arrays using the modulo of the current
+			# side index.  I came up with this by figuring out how the arrays should
+			# look and working back from there.
+			prepended = @slottedSlides.slice @currentSlideIndex % @slidesCount
+			remainder = @slottedSlides.slice 0, @slidesCount - prepended.length
+			return [ ...prepended, ...remainder ]
+
+		# This represents the current (as in while scrolling / animating) left most
+		# slide index. This is used in looping calculation so that the reordering
+		# of slides isn't affected by paginatePerSlide setting.
+		currentSlideIndex: -> Math.floor @currentX / @slideWidth * -1
+
+		# When looping, slides get re-ordered. This value is added to the
+		# track transform so that the slides don't feel like they were re-ordered.
+		trackOffset: ->
+			unless @loop then 0
+			else @currentSlideIndex * @slideWidth
diff --git a/src/concerns/pagination.coffee b/src/concerns/pagination.coffee
index 112de35..ae662f4 100644
--- a/src/concerns/pagination.coffee
+++ b/src/concerns/pagination.coffee
@@ -9,7 +9,7 @@ export default
 		paginateBySlide: Boolean
 
 	data: ->
-		index: 0 # The current page
+		index: 0 # The current page; when looping may exceed slideCount
 		currentX: 0 # The actual left offset of the slides container
 		targetX: 0 # Where we may be tweening the slide to
 
@@ -24,17 +24,23 @@ export default
 		# Disable carousel-ness when there aren't enough slides
 		disabled: -> @slidesCount <= @currentSlidesPerPage
 
-		# Filter out slides that have a "text" property, these aren't actual
-		# elements. They are whitespace, like newlines.
-		slidesCount: ->
-			(@$slots.default || [])
-			.filter (vnode) -> !vnode?.text
-			.length
+		# Get just the slotted slides that are components, ignoring text nodes
+		# which may exist as a result of whitespace
+		slottedSlides: -> @$slots.default.filter (vnode) -> !!vnode.tag
+
+		# Get the total number of slides
+		slidesCount: -> @slottedSlides.length
+
+		# Apply boundaries to the index, which will exceed them when looping
+		boundedIndex: -> Math.abs(@index) % @pages
+
+		# The current incomplete page offset
+		currentIncompletePageOffset: -> @makeIncompletePageOffset @index
 
 	watch:
 
 		# Emit events on index change
-		index: -> @$emit 'change', { @index }
+		boundedIndex: -> @$emit 'change', { @boundedIndex }
 
 	methods:
 
@@ -42,6 +48,11 @@ export default
 		next: -> @goto @index + 1
 		back: -> @goto @index - 1
 
+		# The dots are ignorant of looping, so convert their bounded index to the
+		# true index so we don't animate through a ton of pages going to the
+		# clicked dot.
+		gotoDot: (dotIndex) -> @goto dotIndex - @boundedIndex + @index
+
 		# Go to a specific index
 		goto: (index) ->
 			@index = @applyIndexBoundaries index
@@ -49,12 +60,29 @@ export default
 
 		# Tween to a specific index
 		tweenToIndex: (index) ->
+
+			# Figure out the new x position
 			x = if @paginateBySlide
-			then index * @slideWidth
-			else index * @pageWidth
-			@targetX = @applyXBoundaries -1 * x
+			then index * @slideWidth * -1
+			else index * @pageWidth * -1
+
+			# Apply adjustments to x value and persist
+			x += @makeIncompletePageOffset index
+			@targetX = @applyXBoundaries x
+
+			# Start tweening
 			@startTweening()
 
+		# Creates a px value to represent adjustments that should be made to
+		# account for incommplete pages of slides when looping is enbaled. Like
+		# when there is 3 slotted slides and 2 slides per page.
+		makeIncompletePageOffset: (index) ->
+			return 0 unless @loop and not @paginateBySlide
+			Math.floor(index / @pages) *
+			(@slidesCount % @currentSlidesPerPage) *
+			@slideWidth
+
 		# Apply boundaries to the index
 		applyIndexBoundaries: (index) ->
-			Math.max 0, Math.min @pages - 1, index
+			if @loop then index
+			else Math.max 0, Math.min @pages - 1, index
diff --git a/src/ssr-carousel-arrows.vue b/src/ssr-carousel-arrows.vue
index 68cd172..f9c36f0 100644
--- a/src/ssr-carousel-arrows.vue
+++ b/src/ssr-carousel-arrows.vue
@@ -30,12 +30,13 @@ export default
 	props:
 		index: Number
 		pages: Number
+		loop: Boolean
 
 	computed:
 
 		# Determine if button should be disabled because we're at the limits
-		backDisabled: -> @index == 0
-		nextDisabled: -> @index == @pages - 1
+		backDisabled: -> @index == 0 unless @loop
+		nextDisabled: -> @index == @pages - 1 unless @loop
 
 </script>
 
diff --git a/src/ssr-carousel-dots.vue b/src/ssr-carousel-dots.vue
index 041af16..3c54127 100644
--- a/src/ssr-carousel-dots.vue
+++ b/src/ssr-carousel-dots.vue
@@ -6,7 +6,7 @@
 	button.ssr-carousel-dot-button(
 		v-for='i in pages' :key='i'
 		:aria-label='`Page ${i}`'
-		:disabled='index == i - 1'
+		:disabled='boundedIndex == i - 1'
 		@click='$emit("goto", i - 1)')
 			slot(v-if='$slots.dot' name='dot')
 			span.ssr-carousel-dot-icon(v-else)
@@ -19,7 +19,7 @@
 export default
 
 	props:
-		index: Number
+		boundedIndex: Number
 		pages: Number
 
 </script>
diff --git a/src/ssr-carousel-track.vue b/src/ssr-carousel-track.vue
index 6370c08..0b35b0f 100644
--- a/src/ssr-carousel-track.vue
+++ b/src/ssr-carousel-track.vue
@@ -9,19 +9,20 @@ export default
 	props:
 		dragging: Boolean
 		currentX: Number
+		trackOffset: Number
+		slides: Array
 
 	computed:
 
 		# Styles that are used to position the track
-		styles: -> transform: "translateX(#{@currentX}px)"
+		styles: -> transform: "translateX(#{@currentX + @trackOffset}px)"
 
 	# Render the track and slotted slides
 	render: (create) ->
 
 		# Wrap the slides in ssr-carousel-slide functional components
-		children = @$slots.default.map (child) ->
-			if child.text then child # Text nodes like newlines
-			else create SsrCarouselSlide, { parent: this }, [ child ]
+		children = @slides.map (child) ->
+			create SsrCarouselSlide, { parent: this }, [ child ]
 
 		# Create the track div
 		create 'div',
diff --git a/src/ssr-carousel.vue b/src/ssr-carousel.vue
index 8ccddd5..c22e54c 100644
--- a/src/ssr-carousel.vue
+++ b/src/ssr-carousel.vue
@@ -7,23 +7,27 @@
 	//- Render generated styles
 	component(is='style' v-html='instanceStyles')
 
-	//- The overflow mask and drag target
-	.ssr-carousel-mask(
-		:class='{ pressing, disabled }'
-		v-on='maskListeners')
-
-		//- The container of the slides that animates
-		ssr-carousel-track(
-			ref='track'
-			v-bind='{ dragging, currentX }')
-
-			//- Slides are injected here
-			slot
+	//- Container so that arrows can be centered relative to slides but not be
+	//- within the mask's overflow:hidden (which prevents overriding styles from
+	//- positioning outside of carousel).
+	.ssr-carousel-slides
+
+		//- The overflow mask and drag target
+		.ssr-carousel-mask(
+			:class='{ pressing, disabled }'
+			v-on='maskListeners')
+
+			//- The container of the slides that animates
+			ssr-carousel-track(
+				ref='track'
+				:slides='slides'
+				v-bind='{ dragging, currentX, trackOffset }')
 
 		//- Back / Next navigation
 		ssr-carousel-arrows(
 			v-if='showArrows'
 			v-bind='{ index, pages }'
+			:loop='loop'
 			@back='back'
 			@next='next')
 			template(#back): slot(name='back-arrow')
@@ -32,8 +36,8 @@
 	//- Dots navigation
 	ssr-carousel-dots(
 		v-if='showDots'
-		v-bind='{ index, pages }'
-		@goto='goto')
+		v-bind='{ boundedIndex, pages }'
+		@goto='gotoDot')
 		template(#dot): slot(name='dot')
 
 </template>
@@ -51,6 +55,7 @@ import SsrCarouselTrack from './ssr-carousel-track'
 import autoplay from './concerns/autoplay'
 import dragging from './concerns/dragging'
 import focus from './concerns/focus'
+import looping from './concerns/looping'
 import pagination from './concerns/pagination'
 import responsive from './concerns/responsive'
 import tweening from './concerns/tweening'
@@ -64,6 +69,7 @@ export default
 		autoplay
 		dragging
 		focus
+		looping
 		pagination
 		responsive
 		tweening
@@ -82,8 +88,11 @@ export default
 		showDots: Boolean
 
 	computed:
+
+		# Determine whether to create hover event bindings
 		watchesHover: -> @autoplayDelay > 0
 
+		# Create event bindings
 		maskListeners: ->
 			return {} if @disabled
 			{
@@ -105,6 +114,10 @@ export default
 .ssr-carousel
 	touch-action pan-y
 
+// Posiition arrows relative to this
+.ssr-carousel-slides
+	position relative
+
 // Mask around slides
 .ssr-carousel-mask
 	overflow hidden