diff --git a/js/src/carousel.js b/js/src/carousel.js
index fcc78af6f104..989390aa0a46 100644
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -1,6 +1,3 @@
-import $ from 'jquery'
-import Util from './util'
-
 /**
  * --------------------------------------------------------------------------
  * Bootstrap (v4.1.3): carousel.js
@@ -8,6 +5,9 @@ import Util from './util'
  * --------------------------------------------------------------------------
  */
 
+import $ from 'jquery'
+import Util from './util'
+
 /**
  * ------------------------------------------------------------------------
  * Constants
@@ -23,13 +23,15 @@ const JQUERY_NO_CONFLICT     = $.fn[NAME]
 const ARROW_LEFT_KEYCODE     = 37 // KeyboardEvent.which value for left arrow key
 const ARROW_RIGHT_KEYCODE    = 39 // KeyboardEvent.which value for right arrow key
 const TOUCHEVENT_COMPAT_WAIT = 500 // Time for mouse compat events to fire after touch
+const SWIPE_THRESHOLD        = 40
 
 const Default = {
   interval : 5000,
   keyboard : true,
   slide    : false,
   pause    : 'hover',
-  wrap     : true
+  wrap     : true,
+  touch    : true
 }
 
 const DefaultType = {
@@ -37,7 +39,8 @@ const DefaultType = {
   keyboard : 'boolean',
   slide    : '(boolean|string)',
   pause    : '(string|boolean)',
-  wrap     : 'boolean'
+  wrap     : 'boolean',
+  touch    : 'boolean'
 }
 
 const Direction = {
@@ -53,52 +56,68 @@ const Event = {
   KEYDOWN        : `keydown${EVENT_KEY}`,
   MOUSEENTER     : `mouseenter${EVENT_KEY}`,
   MOUSELEAVE     : `mouseleave${EVENT_KEY}`,
+  TOUCHSTART     : `touchstart${EVENT_KEY}`,
+  TOUCHMOVE      : `touchmove${EVENT_KEY}`,
   TOUCHEND       : `touchend${EVENT_KEY}`,
+  POINTERDOWN    : `pointerdown${EVENT_KEY}`,
+  POINTERMOVE    : `pointermove${EVENT_KEY}`,
+  POINTERUP      : `pointerup${EVENT_KEY}`,
+  POINTERLEAVE   : `pointerleave${EVENT_KEY}`,
+  POINTERCANCEL  : `pointercancel${EVENT_KEY}`,
+  DRAG_START     : `dragstart${EVENT_KEY}`,
   LOAD_DATA_API  : `load${EVENT_KEY}${DATA_API_KEY}`,
   CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`
 }
 
 const ClassName = {
-  CAROUSEL : 'carousel',
-  ACTIVE   : 'active',
-  SLIDE    : 'slide',
-  RIGHT    : 'carousel-item-right',
-  LEFT     : 'carousel-item-left',
-  NEXT     : 'carousel-item-next',
-  PREV     : 'carousel-item-prev',
-  ITEM     : 'carousel-item'
+  CAROUSEL      : 'carousel',
+  ACTIVE        : 'active',
+  SLIDE         : 'slide',
+  RIGHT         : 'carousel-item-right',
+  LEFT          : 'carousel-item-left',
+  NEXT          : 'carousel-item-next',
+  PREV          : 'carousel-item-prev',
+  ITEM          : 'carousel-item',
+  POINTER_EVENT : 'pointer-event'
 }
 
 const Selector = {
   ACTIVE      : '.active',
   ACTIVE_ITEM : '.active.carousel-item',
   ITEM        : '.carousel-item',
+  ITEM_IMG    : '.carousel-item img',
   NEXT_PREV   : '.carousel-item-next, .carousel-item-prev',
   INDICATORS  : '.carousel-indicators',
   DATA_SLIDE  : '[data-slide], [data-slide-to]',
   DATA_RIDE   : '[data-ride="carousel"]'
 }
 
+const PointerType = {
+  TOUCH : 'touch',
+  PEN   : 'pen'
+}
+
 /**
  * ------------------------------------------------------------------------
  * Class Definition
  * ------------------------------------------------------------------------
  */
-
 class Carousel {
   constructor(element, config) {
-    this._items              = null
-    this._interval           = null
-    this._activeElement      = null
-
-    this._isPaused           = false
-    this._isSliding          = false
-
-    this.touchTimeout        = null
-
-    this._config             = this._getConfig(config)
-    this._element            = $(element)[0]
-    this._indicatorsElement  = this._element.querySelector(Selector.INDICATORS)
+    this._items         = null
+    this._interval      = null
+    this._activeElement = null
+    this._isPaused      = false
+    this._isSliding     = false
+    this.touchTimeout   = null
+    this.touchStartX    = 0
+    this.touchDeltaX    = 0
+
+    this._config            = this._getConfig(config)
+    this._element           = element
+    this._indicatorsElement = this._element.querySelector(Selector.INDICATORS)
+    this._touchSupported    = 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0
+    this._pointerEvent      = Boolean(window.PointerEvent || window.MSPointerEvent)
 
     this._addEventListeners()
   }
@@ -220,6 +239,26 @@ class Carousel {
     return config
   }
 
+  _handleSwipe() {
+    const absDeltax = Math.abs(this.touchDeltaX)
+
+    if (absDeltax <= SWIPE_THRESHOLD) {
+      return
+    }
+
+    const direction = absDeltax / this.touchDeltaX
+
+    // swipe left
+    if (direction > 0) {
+      this.prev()
+    }
+
+    // swipe right
+    if (direction < 0) {
+      this.next()
+    }
+  }
+
   _addEventListeners() {
     if (this._config.keyboard) {
       $(this._element)
@@ -230,7 +269,46 @@ class Carousel {
       $(this._element)
         .on(Event.MOUSEENTER, (event) => this.pause(event))
         .on(Event.MOUSELEAVE, (event) => this.cycle(event))
-      if ('ontouchstart' in document.documentElement) {
+    }
+
+    this._addTouchEventListeners()
+  }
+
+  _addTouchEventListeners() {
+    if (!this._touchSupported) {
+      return
+    }
+
+    const start = (event) => {
+      if (this._pointerEvent && (event.originalEvent.pointerType === PointerType.TOUCH || event.originalEvent.pointerType === PointerType.PEN)) {
+        this.touchStartX = event.originalEvent.clientX
+      } else if (!this._pointerEvent) {
+        event.preventDefault()
+        this.touchStartX = event.originalEvent.touches[0].clientX
+      }
+    }
+
+    const move = (event) => {
+      if (!this._pointerEvent) {
+        event.preventDefault()
+
+        // ensure swiping with one touch and not pinching
+        if (event.originalEvent.touches && event.originalEvent.touches.length > 1) {
+          this.touchDeltaX = 0
+        } else {
+          this.touchDeltaX = event.originalEvent.touches[0].clientX - this.touchStartX
+        }
+      }
+    }
+
+    const end = (event) => {
+      if (this._pointerEvent && (event.originalEvent.pointerType === PointerType.TOUCH || event.originalEvent.pointerType === PointerType.PEN)) {
+        this.touchDeltaX = event.originalEvent.clientX - this.touchStartX
+      }
+
+      this._handleSwipe()
+
+      if (this._config.pause === 'hover') {
         // If it's a touch-enabled device, mouseenter/leave are fired as
         // part of the mouse compatibility events on first tap - the carousel
         // would stop cycling until user tapped out of it;
@@ -238,15 +316,26 @@ class Carousel {
         // (as if it's the second time we tap on it, mouseenter compat event
         // is NOT fired) and after a timeout (to allow for mouse compatibility
         // events to fire) we explicitly restart cycling
-        $(this._element).on(Event.TOUCHEND, () => {
-          this.pause()
-          if (this.touchTimeout) {
-            clearTimeout(this.touchTimeout)
-          }
-          this.touchTimeout = setTimeout((event) => this.cycle(event), TOUCHEVENT_COMPAT_WAIT + this._config.interval)
-        })
+
+        this.pause()
+        if (this.touchTimeout) {
+          clearTimeout(this.touchTimeout)
+        }
+        this.touchTimeout = setTimeout((event) => this.cycle(event), TOUCHEVENT_COMPAT_WAIT + this._config.interval)
       }
     }
+
+    $(this._element.querySelectorAll(Selector.ITEM_IMG)).on(Event.DRAG_START, (e) => e.preventDefault())
+    if (this._pointerEvent) {
+      $(this._element).on(Event.POINTERDOWN, (event) => start(event))
+      $(this._element).on(Event.POINTERUP, (event) => end(event))
+
+      this._element.classList.add(ClassName.POINTER_EVENT)
+    } else {
+      $(this._element).on(Event.TOUCHSTART, (event) => start(event))
+      $(this._element).on(Event.TOUCHMOVE, (event) => move(event))
+      $(this._element).on(Event.TOUCHEND, (event) => end(event))
+    }
   }
 
   _keydown(event) {
diff --git a/js/tests/index.html b/js/tests/index.html
index ce4a0e3081a3..1bcdc5380e2e 100644
--- a/js/tests/index.html
+++ b/js/tests/index.html
@@ -28,6 +28,9 @@
     <!-- Sinon -->
     <script src="../../node_modules/sinon/pkg/sinon-no-sourcemaps.js"></script>
 
+    <!-- Hammer simulator -->
+    <script src="../../node_modules/hammer-simulator/index.js"></script>
+
     <script>
       // Disable jQuery event aliases to ensure we don't accidentally use any of them
       [
diff --git a/js/tests/karma.conf.js b/js/tests/karma.conf.js
index 070606a521a7..807f977d96da 100644
--- a/js/tests/karma.conf.js
+++ b/js/tests/karma.conf.js
@@ -46,7 +46,11 @@ const customLaunchers = {
   }
 }
 
-let files = ['node_modules/popper.js/dist/umd/popper.min.js']
+let files = [
+  'node_modules/popper.js/dist/umd/popper.min.js',
+  'node_modules/hammer-simulator/index.js'
+]
+
 const conf = {
   basePath: '../..',
   port: 9876,
diff --git a/js/tests/unit/.eslintrc.json b/js/tests/unit/.eslintrc.json
index 0896f406d0f5..a7fa64af0edf 100644
--- a/js/tests/unit/.eslintrc.json
+++ b/js/tests/unit/.eslintrc.json
@@ -9,7 +9,9 @@
     "sinon": false,
     "Util": false,
     "Alert": false,
-    "Button": false
+    "Button": false,
+    "Carousel": false,
+    "Simulator": false
   },
   "parserOptions": {
     "ecmaVersion": 5,
diff --git a/js/tests/unit/carousel.js b/js/tests/unit/carousel.js
index 20b12f4b069b..d7d9ad250867 100644
--- a/js/tests/unit/carousel.js
+++ b/js/tests/unit/carousel.js
@@ -1,6 +1,26 @@
 $(function () {
   'use strict'
 
+  window.Carousel = typeof bootstrap !== 'undefined' ? bootstrap.Carousel : Carousel
+
+  var originWinPointerEvent = window.PointerEvent
+  window.MSPointerEvent = null
+  var supportPointerEvent = Boolean(window.PointerEvent || window.MSPointerEvent)
+
+  function clearPointerEvents() {
+    window.PointerEvent = null
+  }
+
+  function restorePointerEvents() {
+    window.PointerEvent = originWinPointerEvent
+  }
+
+  var stylesCarousel = [
+    '<style>',
+    '  .carousel.pointer-event { -ms-touch-action: none; touch-action: none; }',
+    '</style>'
+  ].join('')
+
   QUnit.module('carousel plugin')
 
   QUnit.test('should be defined on jQuery object', function (assert) {
@@ -25,6 +45,20 @@ $(function () {
     assert.strictEqual(typeof $.fn.carousel, 'undefined', 'carousel was set back to undefined (orig value)')
   })
 
+  QUnit.test('should return version', function (assert) {
+    assert.expect(1)
+
+    assert.strictEqual(typeof Carousel.VERSION, 'string')
+  })
+
+  QUnit.test('should return default parameters', function (assert) {
+    assert.expect(1)
+
+    var defaultConfig = Carousel.Default
+
+    assert.strictEqual(defaultConfig.touch, true)
+  })
+
   QUnit.test('should throw explicit error on undefined method', function (assert) {
     assert.expect(1)
     var $el = $('<div/>')
@@ -989,4 +1023,207 @@ $(function () {
       }, 80)
     }, 80)
   })
+
+  QUnit.test('should allow swiperight and call prev with pointer events', function (assert) {
+    if (!supportPointerEvent) {
+      assert.expect(0)
+      return
+    }
+
+    document.documentElement.ontouchstart = $.noop
+    Simulator.setType('pointer')
+    assert.expect(3)
+    var $styles = $(stylesCarousel).appendTo('head')
+    var done = assert.async()
+
+    var carouselHTML =
+        '<div class="carousel" data-interval="false">' +
+        '  <div class="carousel-inner">' +
+        '    <div id="item" class="carousel-item">' +
+        '      <img alt="">' +
+        '    </div>' +
+        '    <div class="carousel-item active">' +
+        '      <img alt="">' +
+        '    </div>' +
+        '  </div>' +
+        '</div>'
+
+    var $carousel = $(carouselHTML).appendTo('#qunit-fixture')
+    var $item = $('#item')
+    $carousel.bootstrapCarousel()
+    var carousel = $carousel.data('bs.carousel')
+    var spy = sinon.spy(carousel, 'prev')
+
+    $carousel.one('slid.bs.carousel', function () {
+      assert.ok(true, 'slid event fired')
+      assert.ok($item.hasClass('active'))
+      assert.ok(spy.called)
+      $styles.remove()
+      delete document.documentElement.ontouchstart
+      done()
+    })
+
+    Simulator.gestures.swipe($carousel[0], {
+      deltaX: 300,
+      deltaY: 0
+    })
+  })
+
+  QUnit.test('should allow swiperight and call prev with touch events', function (assert) {
+    Simulator.setType('touch')
+    clearPointerEvents()
+
+    assert.expect(3)
+    var done = assert.async()
+    document.documentElement.ontouchstart = $.noop
+
+    var carouselHTML =
+        '<div class="carousel" data-interval="false">' +
+        '  <div class="carousel-inner">' +
+        '    <div id="item" class="carousel-item">' +
+        '      <img alt="">' +
+        '    </div>' +
+        '    <div class="carousel-item active">' +
+        '      <img alt="">' +
+        '    </div>' +
+        '  </div>' +
+        '</div>'
+
+    var $carousel = $(carouselHTML)
+    $carousel.appendTo('#qunit-fixture')
+    var $item = $('#item')
+    $carousel.bootstrapCarousel()
+    var carousel = $carousel.data('bs.carousel')
+    var spy = sinon.spy(carousel, 'prev')
+
+    $carousel.one('slid.bs.carousel', function () {
+      assert.ok(true, 'slid event fired')
+      assert.ok($item.hasClass('active'))
+      assert.ok(spy.called)
+      delete document.documentElement.ontouchstart
+      restorePointerEvents()
+      done()
+    })
+
+    Simulator.gestures.swipe($carousel[0], {
+      deltaX: 300,
+      deltaY: 0
+    })
+  })
+
+  QUnit.test('should allow swipeleft and call next with pointer events', function (assert) {
+    if (!supportPointerEvent) {
+      assert.expect(0)
+      return
+    }
+
+    document.documentElement.ontouchstart = $.noop
+    assert.expect(3)
+    Simulator.setType('pointer')
+
+    var $styles = $(stylesCarousel).appendTo('head')
+    var done = assert.async()
+
+    var carouselHTML =
+        '<div class="carousel" data-interval="false">' +
+        '  <div class="carousel-inner">' +
+        '    <div id="item" class="carousel-item active">' +
+        '      <img alt="">' +
+        '    </div>' +
+        '    <div class="carousel-item">' +
+        '      <img alt="">' +
+        '    </div>' +
+        '  </div>' +
+        '</div>'
+
+    var $carousel = $(carouselHTML)
+    $carousel.appendTo('#qunit-fixture')
+    var $item = $('#item')
+    $carousel.bootstrapCarousel()
+    var carousel = $carousel.data('bs.carousel')
+    var spy = sinon.spy(carousel, 'next')
+
+    $carousel.one('slid.bs.carousel', function () {
+      assert.ok(true, 'slid event fired')
+      assert.ok(!$item.hasClass('active'))
+      assert.ok(spy.called)
+      $styles.remove()
+      delete document.documentElement.ontouchstart
+      done()
+    })
+
+    Simulator.gestures.swipe($carousel[0], {
+      pos: [300, 10],
+      deltaX: -300,
+      deltaY: 0
+    })
+  })
+
+  QUnit.test('should allow swipeleft and call next with touch events', function (assert) {
+    assert.expect(3)
+    clearPointerEvents()
+    Simulator.setType('touch')
+    document.documentElement.ontouchstart = $.noop
+
+    var done = assert.async()
+
+    var carouselHTML =
+        '<div class="carousel" data-interval="false">' +
+        '  <div class="carousel-inner">' +
+        '    <div id="item" class="carousel-item active">' +
+        '      <img alt="">' +
+        '    </div>' +
+        '    <div class="carousel-item">' +
+        '      <img alt="">' +
+        '    </div>' +
+        '  </div>' +
+        '</div>'
+
+    var $carousel = $(carouselHTML)
+    $carousel.appendTo('#qunit-fixture')
+    var $item = $('#item')
+    $carousel.bootstrapCarousel()
+    var carousel = $carousel.data('bs.carousel')
+    var spy = sinon.spy(carousel, 'next')
+
+    $carousel.one('slid.bs.carousel', function () {
+      assert.ok(true, 'slid event fired')
+      assert.ok(!$item.hasClass('active'))
+      assert.ok(spy.called)
+      restorePointerEvents()
+      delete document.documentElement.ontouchstart
+      done()
+    })
+
+    Simulator.gestures.swipe($carousel[0], {
+      pos: [300, 10],
+      deltaX: -300,
+      deltaY: 0
+    })
+  })
+
+  QUnit.test('should not allow pinch with touch events', function (assert) {
+    assert.expect(0)
+    clearPointerEvents()
+
+    Simulator.setType('touch')
+    var done = assert.async()
+    document.documentElement.ontouchstart = $.noop
+
+    var carouselHTML = '<div class="carousel" data-interval="false"></div>'
+    var $carousel = $(carouselHTML)
+    $carousel.appendTo('#qunit-fixture')
+    $carousel.bootstrapCarousel()
+
+    Simulator.gestures.swipe($carousel[0], {
+      pos: [300, 10],
+      deltaX: -300,
+      deltaY: 0,
+      touches: 2
+    }, function () {
+      restorePointerEvents()
+      delete document.documentElement.ontouchstart
+      done()
+    })
+  })
 })
diff --git a/package-lock.json b/package-lock.json
index e6356551a081..2f9ffec22af4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4812,6 +4812,12 @@
         "pify": "^3.0.0"
       }
     },
+    "hammer-simulator": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/hammer-simulator/-/hammer-simulator-0.0.1.tgz",
+      "integrity": "sha1-7tO85CtDMgF1o/T4NP4gjl+iSho=",
+      "dev": true
+    },
     "handlebars": {
       "version": "4.0.12",
       "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.0.12.tgz",
diff --git a/package.json b/package.json
index fbb238adcd9a..39e883d18be0 100644
--- a/package.json
+++ b/package.json
@@ -114,6 +114,7 @@
     "eslint": "^5.7.0",
     "find-unused-sass-variables": "^0.2.1",
     "glob": "^7.1.3",
+    "hammer-simulator": "0.0.1",
     "htmllint-cli": "^0.0.7",
     "http-server": "^0.11.1",
     "ip": "^1.1.5",
@@ -189,7 +190,7 @@
     },
     {
       "path": "./dist/js/bootstrap.js",
-      "maxSize": "21 kB"
+      "maxSize": "22 kB"
     },
     {
       "path": "./dist/js/bootstrap.min.js",
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 97e792ea722d..41d4e60265bc 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -1,17 +1,24 @@
 // Notes on the classes:
 //
-// 1. The .carousel-item-left and .carousel-item-right is used to indicate where
+// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
+//    even when their scroll action started on a carousel, but for compatibility (with Firefox)
+//    we're preventing all actions instead
+// 2. The .carousel-item-left and .carousel-item-right is used to indicate where
 //    the active slide is heading.
-// 2. .active.carousel-item is the current slide.
-// 3. .active.carousel-item-left and .active.carousel-item-right is the current
+// 3. .active.carousel-item is the current slide.
+// 4. .active.carousel-item-left and .active.carousel-item-right is the current
 //    slide in its in-transition state. Only one of these occurs at a time.
-// 4. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
+// 5. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
 //    is the upcoming slide in transition.
 
 .carousel {
   position: relative;
 }
 
+.carousel.pointer-event {
+  touch-action: none;
+}
+
 .carousel-inner {
   position: relative;
   width: 100%;
diff --git a/site/docs/4.1/components/carousel.md b/site/docs/4.1/components/carousel.md
index 543b06430a6a..b568a02cd585 100644
--- a/site/docs/4.1/components/carousel.md
+++ b/site/docs/4.1/components/carousel.md
@@ -281,6 +281,12 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
       <td>true</td>
       <td>Whether the carousel should cycle continuously or have hard stops.</td>
     </tr>
+    <tr>
+      <td>touch</td>
+      <td>boolean</td>
+      <td>true</td>
+      <td>Whether the carousel should support left/right swipe interactions on touchscreen devices.</td>
+    </tr>
   </tbody>
 </table>