Aggiungere il supporto swipe al carousel di Bootstrap

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.18/jquery.touchSwipe.min.js"></script>
<div class="demo-content">
    <div id="carousel" class="carousel slide" data-ride="carousel" data-interval="false">
        <ol class="carousel-indicators">
            <li data-target="#carousel" data-slide-to="0" class="active"></li>
            <li data-target="#carousel" data-slide-to="1"></li>
            <li data-target="#carousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block img-fluid m-auto" src="https://code4life.it/wp-content/uploads/2017/10/placeholder.jpg" alt="" />
            </div>
            <div class="carousel-item">
                <img class="d-block img-fluid m-auto" src="https://code4life.it/wp-content/uploads/2017/10/placeholder.jpg" alt="" />
            </div>
            <div class="carousel-item">
                <img class="d-block img-fluid m-auto" src="https://code4life.it/wp-content/uploads/2017/10/placeholder.jpg" alt="" />
            </div>
        </div>
    </div>
</div>

<!-- Credits -->
<div class="credits">
	<a class="btn-credits" href="https://code4life.it/guide/aggiungere-il-supporto-swipe-al-carousel-di-bootstrap/" target="_blank">Vedi articolo completo</a>
</div>

CSS

/*
 * TITLE:   Aggiungere il supporto swipe al carousel di Bootstrap
 * AUTHOR:  Code4Life
 * WEBSITE: https://code4life.it/
 * ARTICLE: https://code4life.it/guide/aggiungere-il-supporto-swipe-al-carousel-di-bootstrap/
 */
 
/* Demo style only */
.demo-content { margin-bottom: 70px; text-align: center; }
.carousel { border: solid 1px #33b5e5; }

/* Credits */
@import url( 'https://fonts.googleapis.com/css?family=Roboto:300' );
.credits { background: #F3F5F6; border: solid 1px #CFD6D9; bottom: 40px; left: 0; padding: 10px; position: fixed; right: 0; text-align: center; z-index: 1000; }
.btn-credits { border: 2px solid #33b5e5; border-radius: 10em; color: #33b5e5 !important; display: inline-block; font-family: 'Roboto', sans-serif; font-size: .8rem; line-height: 1.25; padding: .85rem 2.13rem; text-decoration: none; text-transform: uppercase; transition: .2s ease-out; vertical-align: middle; }
.btn-credits:hover { background-color: #33b5e5; color: #fff !important; }

JavaScript

jQuery( function( $ ) {
    $( '.carousel-inner' ).swipe( {
        swipeLeft: function( e, direction, distance, duration, count ) {
            $( this ).parent().carousel( 'next' );
        },
        swipeRight: function( e, direction, distance, duration, count  ) {
            $( this ).parent().carousel( 'prev' );
        },
  threshold: 0
    } );
} );