Recommended way to enable touch events in Bootstrap 3?

Question

Now that Bootstrap 3 is out, what is the recommended option for enabling touch? As before, there aren't many touch events in the bootstrap.js, though it is supposed to be a mobile first framework.

The last thing I've found on github suggests using fastclick.js, but that was before the v3.0 release.

score 2 · Accepted Answer · answered Dec 09 '13 at 22:06

2

My recommendation is to use Bootstrap alongside JQuery mobile, TouchSwipe, or Hammer.js . An example of a bootstrap touch carousel can be found here.

answered Dec 09 '13 at 22:06

theannouncer

1,148
16
28

I was going to ask more about what/how to use JQuery Mobile, as I am reticent to add yet another JS framework, but your blog post goes into much more detail - thank you! – conradj Dec 10 '13 at 08:53
I hadn't heard of TouchSwipe until now so I gave it a try. After only a couple minutes of experimenting, I found TouchSwipe integrates nicely with Bootstrap, is simple to use, and is very lightweight. Great recommendation! – CChoma Aug 29 '15 at 22:49

score 2 · Answer 2 · answered Dec 13 '13 at 17:41

2

Start working on another fully working Touch Carousel on GitHub. This also includes drag events...

answered Dec 13 '13 at 17:41

ixisio

21
2

score -2 · Answer 3 · edited Nov 05 '18 at 04:26

Despite I believe bootstrap is a joke of a css framework (especially due to no multileveled navigation), I would probably agree with others to go with some different carousel if you have a choice.

From my experience JQuery mobile will work rather smoothly but my site was not built alongside jquery mobile and the css belonging to it really messed the things up.

<script>
    $(document).ready(function() {
        $('.carouselresp').carousel({'data-interval': 6000, 'data-pause': "hover"});
        var clicking = false;
        var currentMousePos = 0;
        var newMousePos = 0;

        $('.carouselresp img').on('mousedown', function(event) {
            clicking = true;
            currentMousePos = event.pageX;
        });

        $('.carouselresp img').on('touchstart', function(event) {
            clicking = true;
            var touchstart = event.originalEvent.touches[0];
            currentMousePos = touchstart.pageX;
        });

        $(document).on('mouseup', function(event) {
            clicking = false;
        });

        $('.carouselresp img').on('touchend', function(event) {
            clicking = false;
        });

        $(document).on('mousemove', function(event) {
            if (!clicking) {
                return;
            }else {
                if (event.pageX < currentMousePos) {
                    if ((currentMousePos - event.pageX) > 50) {
                        $('.carouselresp').carousel('next');
                        clicking = false;
                    }
                } else {
                    if ((event.pageX - currentMousePos) > 50) {
                        $('.carouselresp').carousel('prev');
                        clicking = false;
                    }
                }
            }
        });

        $('.carouselresp img').on('touchmove', function(event) {
            var touch = event.originalEvent.touches[0];
            if (!clicking) {
                return;
            }else {
                if (touch.pageX < currentMousePos) {
                    if ((currentMousePos - touch.pageX) > 50) {
                        $('.carouselresp').carousel('next');
                        clicking = false;
                    }
                } else {
                    if ((touch.pageX - currentMousePos) > 50) {
                        $('.carouselresp').carousel('prev');
                        clicking = false;
                    }
                }
            }
            event.preventDefault();
        });
    });


</script>

It works fine for me on android and iphone too, plus I am allowing the move event in browsers with no touch support.

I hope it helped.

TomHre

Recommended way to enable touch events in Bootstrap 3?

3 Answers3

Linked