删除手机上的slick.js幻灯片

Question

我试图将光滑的轮播设备放在移动设备/平板电脑上时将其移除。

这是我拥有的HTML的基本版本；

<div class="wrapper hero-slider" id="myCarousel">
   <div class="hero__item hero__item-home hide-on-mobile">
      <img src="image" alt="" class="hero__bottle hero__bottle- 
      showcase">
      <img src="image" 
      alt="" class="hero__bottle hero__bottle-showcase">
      <img src="image" alt="" class="hero__bottle hero__bottle- 
      showcase">
   </div>
   <div class="hero__item hero__item-home">
      .....
   </div>
   <div class="hero__item hero__item-home">
      .....
   </div>
   <div class="hero__item hero__item-home">
      .....
   </div>
</div>

我找到了这个，并试图使其与我的代码一起使用，这是我用来隐藏幻灯片的脚本。

 var breakpointMobile = 700,
    isChanging = false,
    isFiltered = false;
$('#breakpointMobile').text( breakpointMobile );

$('#myCarousel').on('init breakpoint', function(event, slick){  /** 2. and 5. **/
    if ( ! isChanging ) {                                         /** 4. **/
        $('#breakpointValue').text( String(slick.activeBreakpoint) );
        isChanging = true;
    if ( slick.activeBreakpoint && slick.activeBreakpoint <= breakpointMobile) {
        if ( ! isFiltered ) {
            slick.slickFilter(':not(.hide-on-mobile)');             /** 3. **/
            isFiltered = true;
        }
    } else {
        if ( isFiltered ) {
            slick.slickUnfilter();
            isFiltered = false;
        }
    }
        isChanging = false;
    }
})

$(document).ready(function(){
        $('.hero-slider').slick({
            autoplay: false,
            arrows: false,
            responsive: [
                { breakpoint: 500 },
                { breakpoint: 700 },
                { breakpoint: 900 }
              ]
        });

该代码没有破坏任何东西，似乎只是行不通。 我确实意识到我有一些错误的类名（可能仍然有），我认为这是问题所在，但还是没有运气。

这就是我所遵循的答案；

如何删除手机上的光滑幻灯片？

我唯一能看到的就是如何称呼油滑。

      $(document).ready(function(){
        $('.hero-slider').slick({
        });

我觉得这一定是一个问题，但我不知道为什么会这样。

任何帮助都会很棒。

谢谢，扎克

Answer 1

您首先必须确定用户是否正在移动设备上浏览网站。 您可以使用Navigator传递的Navigator标头来实现此目的。 您可以通过以下方式做到这一点：

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

然后使用if(isMobile.any())来确定用户是否在移动设备上。

要在滑块上使用此功能，可以使用：

  $(document).ready(function(){
       if(!isMobile.any()) {
             $('.hero-slider').slick({ /* slider code here */ });
       }
    });