CODEWITHSUNDEEP
htmltwitter-bootstrapjquery-mobiletwitter-bootstrap-3carousel
Sergej
Sergej

Reputation: 1092

jQuery mobile swipe should not work on desktop

I'm using Bootstrap's (3.3.5) Carousel to show a Slider on a page. Code is pretty simple and standard:

<div id="header-carousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="pull-right carousel-indicators">
        <li data-target="#header-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#header-carousel" data-slide-to="1"></li>
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <article class="item active" style="background-image:url(foo.jpg);">
            <div class="carousel-caption">
                <h1>FOO</h1>
                <h2>Caption</h2>
            </div>
        </article>
        <article class="item" style="background-image:url(bar.jpg);">
            <div class="carousel-caption">
                <h1>BAR</h1>
                <h2>Caption</h2>
            </div>
        </article>
    </div>
</div>

I was missing the option to swipe on mobile devices, so I added jQuery mobile 1.4.5 to get this function like this:

$(document).ready(function() {
    $("#header-carousel").swiperight(function() {
        $(this).carousel('prev');
    });
    $("#header-carousel").swipeleft(function() {
        $(this).carousel('next');
    });
});

So far it works on mobile and tablets. But it also works on desktops, so one can't select the caption without triggering the swipe-methods. Is there a possibility to deactivate this behaviour?

Upvotes: 0

Views: 1384

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167192

I would ask you to disable it only for those devices without Touch support. So for that, you can try this:

function isTouchSupported () {
  try {  
    document.createEvent("TouchEvent");
    touch = true;
  } catch (e) {
    touch = false;
  }
  return touch;
}

The same program can be written in another way too:

function isTouchSupported () {
  return 'ontouchstart' in document.documentElement;
}

And after initializing, you can unbind the events:

if (!isTouchSupported())
  $("#header-carousel").off("swiperight").off("swipeleft");

edit: added () to isTouchSupported-call

Self Proof Check:

On my desktop Google Chrome, using F12 Developer Tools:

On my mobile Google Chrome, using jsBin's console tab.

Upvotes: 2

Related Questions