Question

我有一个jQuery滑块，左侧有下一个和上一个箭头按钮。我希望这些按钮在响应时不会影响网站的其他部分，但我已经尝试了几个示例，但是无法让它工作。

HTML

<div id="w"> 
<nav class="slidernav">
  <div id="navbtns" class="clearfix">
  <a href="#" class="previous"><img src="img/arrowprev.png"/></a>

  <a href="#" class="next"><img src="img/arrownext.png"/></a>
</div>      
</nav>

CSS

/** media queries **/
@media screen and (max-width: 660px) {
  h1 { font-size: 2.4em; line-height: 1.2em; }

 .crsl-item h3 { font-size: 1.65em; }
}

/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden;    line-height: 0; height: 0; }
.clearfix { display: inline-block; }

html[xmlns] .clearfix { display: block; overflow: hidden; }
* html .clearfix { height: 1%; }


previous {

float: left;
margin-left: -3%;
margin-top: 10%;
position: absolute;
z-index: 999999;
opacity: 0.0;
}
.next {

float: left;
margin-left: -3%;
margin-top: 10%;
position: absolute;
z-index: 999999;
opacity: 0.0;
}

我走到了尽头。

Answer 1

您可以根据设备分辨率轻松地打开/关闭这两个按钮的显示属性。首先，将它们设置为可见（显示：块）。其次，如果屏幕小于660px（在本例中），则将显示交换为无。

.previous,
.next {
  display:block;
}

@media screen and (max-width: 660px) {
  .previous,
  .next {
    display:none;
  }
}

Answer 2

隐藏next和prev按钮：

首先使用media query示例屏幕尺寸

来定位窗口/屏幕尺寸

@media screen and (max-width: 660px) {

  //content here

}

@media screen and (max-width: 980px) {

      //content here

    }

在结束</head>标记之前，请不要忘记此元标记。

<meta name="viewport" content="width=device-width" />

试试这个：

     //you can set what value you want in max-width
@media screen and (max-width: 660px) { 

       // use display:none to hide your button when the screen size below 660px     
         .slidernav #navbtns a {display:none}

        }

并且不要忘记元标记。

在css中隐藏幻灯片箭头按钮

2 个答案: