Question

我正在尝试创建仅在屏幕尺寸小于640像素时才有效的图像滑块。当屏幕宽度为640时，它显示3个宽33％的项目，因此它在屏幕上非常适合。我实现了让它们滑动但是如果我重新调整大小然后640像素并清除间隔滑块就会冻结并让我失真3张照片。有没有办法让滑块仅在一个屏幕尺寸上工作？下面的代码是我到目前为止所得到的，但我只是天堂没有发现任何类似的任务，或者看到有人在谷歌上做过。

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

您应该真正调整内容的大小或“CheckView”＃39;根据css媒体查询而不是硬编码大小到你的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}

注意：这些只是示例

创建仅适用于小屏幕的内容滑块

1 个答案: