bootstrap轮播图？

Question

最近在做一个响应式的个人博客网站。 用的bootstrap做的轮播图，体验很好； 那么问题来了： 移动端怎么通过触摸屏幕切换轮播图片？ 抛弃别的框架如：swiper等（swiper我用了，可以）先不说， 能不能不引入别的框架解决此问题， 或者之前有同志遇到类似问题的， 求告一下解决方案， 本人有严重强迫症， 不完美的不行。 谢谢各位老铁先。

Answer 1

用js监听滑动事件，然后调用轮播接口即可。这里有份示例：

<script type = "text/javascript" >
var isTouch = ('ontouchstart' in window);
if (isTouch) {
    $(".carousel").on('touchstart',
    function(e) {
        var that = $(this);
        var touch = e.originalEvent.changedTouches[0];
        var startX = touch.pageX;
        var startY = touch.pageY;
        $(document).on('touchmove',
        function(e) {
            touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
            var endX = touch.pageX - startX;
            var endY = touch.pageY - startY;
            if (Math.abs(endY) < Math.abs(endX)) {
                if (endX > 10) {
                    $(this).off('touchmove');
                    that.carousel('prev');
                } else if (endX < -10) {
                    $(this).off('touchmove');
                    that.carousel('next');
                }
                return false;
            }
        });
    });
    $(document).on('touchend',
    function() {
        $(this).off('touchmove');
    });
} < /script>