Use JavaScript to Exclude Feature on Mobile

Question

I'm looking for a way to make "arrows: true" dependent on whether the user is on mobile or not. This is for a slideshow that involves liquid template language

 this.settings = {
      accessibility: true,
      arrows: true,
      dots: false,
      fade: true,
      draggable: true,
      touchThreshold: 20,
      autoplay: this.$slideshow.data('autoplay'),
      autoplaySpeed: this.$slideshow.data('speed')
    };

I've tried setting and using a variable to no avail. Are there any straightforward ways to do this?

Edit:

I've tried the following (it most likely has errors):

var noarrow 

if ($(window).width() <= 670) {
} noarrow = "false",
  else { 
noarrow = "true"

}

arrow: "no arrow"

What library are you using? Is `arrows` reactive? Are you able to set `arrows` after the slideshow has been created? You can leverage the JavaScript version of media queries: [`matchMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) — zero298, Jul 10 '18 at 20:43
*"I've tried setting and using a variable to no avail."* - Can you share your attempt(s)? Not only does it give us a more specific idea of what you'd like to do, but it helps us avoid suggesting solutions that you've already tried. — Tyler Roper, Jul 10 '18 at 20:43
Don't approach this from the perspective of "I want this enabled on mobile but not desktop". Enable features based on a concrete feature-set like available screen width or touch capabilities. Otherwise you risk making a feature unavailable on a platform that it **should** be enabled on. — zero298, Jul 10 '18 at 20:47
And when I say "mobile", I mean screens smaller than 680x, Apologies for my misuse of terms — Hayden, Jul 10 '18 at 21:13

score 1 · Accepted Answer · answered Jul 10 '18 at 20:58

1

Here is a solution I have used, though instead of using the property of your object, you will have to get the value using a function .

let settings = {
  accessibility: true,
  arrows: () => {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? true : false;
  },
  dots: false,
  fade: true,
  draggable: true,
  touchThreshold: 20
};

console.log(settings.arrows());

answered Jul 10 '18 at 20:58

Alex

1,945
1
7
20

To test the code: **Open Inspector `F12`** & **Press `Ctrl` + `Shift` + `M`** & **Run code snippet**. It should return `True`. – Alex Jul 11 '18 at 09:18

Use JavaScript to Exclude Feature on Mobile

1 Answers1