CODEWITHSUNDEEP
jquerytwitter-bootstraptabstouchswipe
lukas81298
lukas81298

Reputation: 51

Add Swipe Support for Bootstrap Tabs

I currently have a bootstrap tab pane with two different tabs. Is it possible to support swipe gestures on devices with touch screens to switch between the tabs? I found tons of libraries for carousels but nothing for tabs.

Upvotes: 4

Views: 12455

Answers (1)

Prof
Prof

Reputation: 657

  1. Go to http://jquerymobile.com/download-builder/, in Events select Touch. Press "Build my download". Download archive.
  2. Add jquery.mobile.custom.min.js from downloaded archive to you javascript folder. Now we have support for touchstart, touchmove, touchend, tap, taphold, swipe, swipeleft, swiperight, scrollstart, scrollstop events.

  3. Your html:

    <script src="jquery.mobile.custom.min.js"></script>

<script>
    $(function() {
        $(".tab-content").swiperight(function() {
            var $tab = $('#tablist .active').prev();
            if ($tab.length > 0)
                $tab.find('a').tab('show');
        });
        $(".tab-content").swipeleft(function() {
            var $tab = $('#tablist .active').next();
            if ($tab.length > 0)
                $tab.find('a').tab('show');
        });
    });
</script>

<div role="tabpanel">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist" id="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
  </div>

</div>

Upvotes: 19

Related Questions