javascript - 创建仅适用于小屏幕的内容 slider

Question

我正在尝试创建仅在屏幕尺寸小于 640 像素时才有效的图像 slider 。当屏幕比 640 宽时，它会显示 3 个宽度为 33% 的元素，因此它适合屏幕。我实现了让它们滑动，但如果我将尺寸重新调整回大于 640 像素并清除间隔， slider 就会卡住并让我扭曲 3 张图片。有没有办法让 slider 只在一种屏幕尺寸上工作？下面的代码是我到目前为止得到的，但我只是天堂没有找到任何类似的任务，也没有看到有人在谷歌上这样做。

Jquery 代码

 var slider = $("#slider")
    var container = $("#slides");
    var slides = $(".slides");
    var len = 3;
    var current = 1;
    var width = '100%';
    var animationSpeed = 3000;
    var pause = 3000;
    var interval;

    function startSlider() {
        interval = setInterval(function () {
                container.animate({
                    'margin-left': '-=' + width
                }, animationSpeed, function () {
                    if (++current === len) {
                        current = 1;
                        container.css('margin-left', 0);
                    }
                });
            }, pause);
    }

    function stopSlider(){
        clearInterval(interval);
    }

    function checkView() {
        var winWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        if(winWidth < 640   ) {
           startSlider();
        } else{

            stopSlider();
        }

    }
    checkView();
    $(window).resize(checkView);

HTML 代码

<section id="slider" class="slider clearfix">
       <nav class="nav-arrow">
           <img id="#prev" class="prev" src="images/1463330656_br_prev.png" alt="prev">
           <img id="#next" class="next" src="images/1463330669_br_next.png" alt="next">
       </nav>
     <ul id="slides" class="slides">
         <li><img class="slide" src="images/box.jpg" alt=""></li>
         <li><img class="slide" src="images/bridge.jpg" alt=""></li>
         <li><img class="slide" src="images/smile.jpg" alt=""></li>
     </ul>
</section>

Answer 1

您真的应该根据 css 媒体查询调整内容或“CheckView”的大小，而不是将大小硬编码到您的 jquery 中。

您可以在 css 的末尾附加多个媒体查询，您可以在其中相应地调整大小，例如

@media only screen and (min-width:320px) and (max-width:640px){ // your necessary css here}
 @media only screen and (min-width:1024px){ // your necessary css here}

注意:这些只是例子