Question

我有这段代码：

<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-->

我尝试了多种解决方案，但它不起作用。我不知道为什么，我需要它。我在代码中添加了：

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

版本是： Bootstrap v3.3.7

jQuery JavaScript Library v3.2.1

你能帮助我吗？

由于

Answer 1

这是我的解决方案：

我们需要为jQuery Mobile支持触摸事件库： http://jquerymobile.com/download-builder/

导入库file.min.js

最后，添加到新的javascript文件：

$(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"
    });
});

Answer 2

我们提出了这个简单的解决方案，支持触摸滑动和鼠标移动。它应该在您的设置中工作，并且易于理解。

(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);

部分内容取自利亚姆的答案： Liams answer on carousel swipe

Answer 3

对我来说，使用TouchSwipe插件使操作变得轻而易举（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
    });

添加滑动到bootstrap轮播

3 个答案: