时间戳

首页 > 解决方案 > Slick.js 在移动设备上显示滚动条

javascript - Slick.js 在移动设备上显示滚动条

问题描述

Slick.js 滑块在移动设备上显示滚动条，允许向下滚动页面。一切都在桌面上 100% 运行，即使浏览器窗口压缩到 800 像素以下，激活移动布局。我尝试过更改position和display设置，但无济于事。我有一种感觉，这可能与 iOS 上的 Safari 相关？有关视觉解释，请参见下面的 GIF。

GIF 视觉

移动设备上的 Slick.js 滚动条

HTML

<body>
                
<div id="mob-menu" class="mobile-nav">
    <div id="hn-but"><a href="index.html"><p>Hannah Neville</p></a></div>
    <div id="men-but"><a href="#" id="menu-open" class="showhide"><span>Menu</span></a></div>
    <div><a href="#" id="info-mob"><i class="fa fa-info"></i></a></div>
    <div id="title-but"><a href="#"><p>Herbal Essences</p></a></div>            
    <div><a href="#" id="dark-btn" onclick="darkmode()"><i class="fa fa-circle"></i></a></div>
</div>    

<div class="image-slider">
    <div class="image-div"><img class="image" src="assets/herbal-essences/Herbal-Essences1.png"></div>
    <div class="image-div"><img class="image" src="assets/herbal-essences/Herbal-Essences2.jpg"></div>
    <div class="image-div"><video id="he-vid" class="video" autoplay muted loop><source src="assets/herbal-essences/Herbal-Essences3.mp4" type="video/mp4">Your browser does not support the video tag.</video></div>
</div>

</body>

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.image-slider {
    height: 100%;
    width: 100vw;
    margin: 0 0;
    padding: 0 0;
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease;
    overflow-y: hidden;
}

img,
video {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.image,
.video {
    max-height: calc(100vh - 15rem);
    max-width: calc(100vw - 2.5rem);
    margin: 0 auto; /* it centers any block level element */
    width: auto;
    height: auto;
}

JS

/* Slick Image Slider */    
    
$('.image-slider').slick({
    infinite: true,
    speed: 500,
    fade: true,
    cssEase: 'linear',
    arrows: false,
    swipe: true,
});
    
$('#prev').click(function() {
    $('.image-slider').slick('slickPrev');
  });
    
$('#next').click(function() {
    $('.image-slider').slick('slickNext');
  });

标签： javascripthtmljquerycssslick.js

解决方案

尝试

.slick-slide
{
    height: inherit !important;
}

推荐阅读