Question

我需要光滑的滑盖转盘完全位于用户正在浏览的任何浏览器中的中心。换句话说，无论您是在台式机浏览器中查看它还是在iPhone X Max中，滑盖都位于视口的中间。滑块停留在页面顶部。

我尝试了所有可以找到的解决方案，但是无论如何，carosuel仍然停留在页面顶部。

this is the first method i tried https://github.com/kenwheeler/slick/issues/281
I tried to fiddle with what i found in both slick.css and slick-theme.css and still couldnt figure it out.

.slick-slide.c {
    display: inline-block;
    vertical-align: middle;
    float:none;
}

 My current style.css 

#wrapper{
  width: 100%;
  margin: auto;
  height: 100%;
  background: grey;
  }

html, body {
  height: 100%;
  margin: 0
}
body.Site{
  text-align: center;
  width: 100%;
  outline: 0;
  min-height: 100%;
  background: blue;

}
main.Site-content{


}
footer {

  height: 120px;
  background: red;

}

.barcode{
font-family: 'Libre Barcode 39', cursive;
font-size: 2vw;
}



.slider {
  display: block;
  margin: 0 auto;
  text-align: center;
  font-size: 17px;
  background: green;

}

.player {
  width: 80%;
  text-align: center;
  background: purple;
  outline: 0;
}


I expect my slider to remain centered vertically and horizontally within its viewport.

Answer 1

这是可用于水平和垂直放置滑块中心的代码。由于在代码片段中添加外部库存在一些问题，因此我为您创建了一个Codepen。您可以参考以下link：

 
 $('.slider-nav').slick({
   slidesToShow: 3,
   slidesToScroll: 1,
   asNavFor: '.slider-for',
   dots: true,
   focusOnSelect: true
 });

body{
  background:#ccc;
}
.main {
  font-family:Arial;
  width:500px;
  display:block;
  margin:0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
h3 {
    background: #fff;
    color: #3498db;
    font-size: 36px;
    line-height: 100px;
    margin: 10px;
    padding: 2%;
    position: relative;
    text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div class="main">
  
  <div class="slider slider-nav">
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
  </div>
</div>

编辑注意：请检查代码笔链接而不是摘要结果作为最终结果。

如何垂直和水平居中滑动滑块？

1 个答案: