adding swipe to bootstrap carousel

Question

I have this code:

<div class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
        <!--Indicators-->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
        </ol>
        <!--Images-->
        <div class="carousel-inner">
            <div class="item active">
                <img src="../sources/img/carousel/01.jpg">
                    <div class="carousel-caption">
                        <div class="carouselcaptiontext">
                    <h2>Demo</h2>
                <h4>Text</h4>
                </div>
                    </div>
            </div>
            <div class="item">
                <img src="../sources/img/carousel/02.jpg">
                <div class="carousel-caption">
                    <div class="carouselcaptiontext">
                        <h2>Demo</h2>
                        <h4>Text</h4>
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="../sources/img/carousel/03.jpg">
                <div class="carousel-caption">
                    <div class="carouselcaptiontext">
                        <h2>Demo</h2>
                        <h4>Text</h4>
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="../sources/img/carousel/04.jpg">
                <div class="carousel-caption">
                    <div class="carouselcaptiontext">
                        <h2>Demo</h2>
                        <h4>Text</h4>
                    </div>
                </div>
            </div>
        </div>
        <!--Carousel controls-->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div> <!--Container carousel-->

I tried multiples solutions but it doesn't work. I don't know why and I need it please. On code I added:

<script type="text/javascript" src="../sources/js/jquery.min.js"></script>
<script type="text/javascript" src="../sources/js/bootstrap.min.js"></script>

The versions are: Bootstrap v3.3.7

jQuery JavaScript Library v3.2.1

Can you help me?

Thanks

SO can help you with code you wrote but SO is not here to write code for you. — Rob, Jun 13 '17 at 22:15

score 0 · Answer 1 · answered Jun 13 '17 at 21:54

This is my solution:

We need to support touch events a library for that jQuery Mobile: http://jquerymobile.com/download-builder/

Import the library file.min.js

Finally, add to new javascript file:

$(document).ready(function () {
    $(".carousel").swipe({
        swipe: function(event, direction, distance, duration, fingerCount, fingerData) {
            if (direction == 'left') $(this).carousel('next');
            if (direction == 'right') $(this).carousel('prev');
        },
        allowPageScroll:"vertical"
    });
});

score 0 · Answer 2 · answered Jul 10 '17 at 09:20

We came up with this simple solution, supporting touch swipe and mouseMove. It should work in your setup and is easy to understand.

(function ($) {
// Mobile swipe if more than 5 pixels moved
$(".carousel").on("touchstart", function (event) {
    var xClick = event.originalEvent.touches[0].pageX;
    $(this).one("touchmove", function (event) {
        var xMove = event.originalEvent.touches[0].pageX;
        if (Math.floor(xClick - xMove) > 5) {
            $(this).carousel('next');
        }
        else if (Math.floor(xClick - xMove) < -5) {
            $(this).carousel('prev');
        }
    });
    $(".carousel").on("touchend", function () {
        $(this).off("touchmove");
    });
});

// Mouse swipe when mouse is dragged to left/right
var xClick;
var mouseDown;

$(".carousel").on("mousedown", function (event) {
    xClick = event.pageX;
    mouseDown = true;
});

$(".carousel").on("mousemove", function (event) {
    if (mouseDown) {
        var xMove = event.pageX;
        if (xClick > xMove) {
            $(this).carousel('next');
        }
        else if (xClick < xMove) {
            $(this).carousel('prev');
        }
    }
});

$(".carousel").on("mouseup", function (event) {
    mouseDown = false;
});
})(jQuery);

Part of it is taken from this answer of Liam: Liams answer on carousel swipe

score 0 · Answer 3 · answered Dec 06 '18 at 21:52

For me, using the TouchSwipe plugin makes this a breeze (via).

$(".carousel-inner").swipe( {
        //Generic swipe handler for all directions
        swipeLeft:function(event, direction, distance, duration, fingerCount) {
            $(this).parent().carousel('next'); 
        },
        swipeRight: function() {
            $(this).parent().carousel('prev'); 
        },
        //Default is 75px
        threshold:75
    });

adding swipe to bootstrap carousel

3 Answers3