-2

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" 
6
  • 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 Commented Jul 10, 2018 at 20:43
  • 2
    "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. Commented Jul 10, 2018 at 20:43
  • 1
    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. Commented Jul 10, 2018 at 20:47
  • Use modernizr my be? Commented Jul 10, 2018 at 20:52
  • I've updated the post to show what I have attempted Commented Jul 10, 2018 at 21:12

1 Answer 1

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());

Sign up to request clarification or add additional context in comments.

1 Comment

To test the code: Open Inspector F12 & Press Ctrl + Shift + M & Run code snippet. It should return True.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.