主页 / 问题 / 914744
Accepted
Aleksandr Krais
Asked:2020-12-03 12:43:04 +0000 UTC2020-12-03 12:43:04 +0000 UTC

如何绝对定位光滑的滑块？

  • 772

大家好，问题的本质：在页面光滑滑块上可用。需要使用绝对定位来放置它，但是如果将其设置为 position: absolute，那么它的元素会变得非常宽。如何克服？我已经把它塞进了一堆包装纸里，只是还没试过。我做了绝对的包装，一切都是徒劳的......这是滑块的链接

HTML：

<div class="wrapper">
 <div class="wrap">
  <div class="slider">
   <div class="list" ></div>
   <!-- /.slider-item -->
   <div class="list sec" ></div>
   <!-- /.slider-item -->
   <div class="list" ></div>
   <!-- /.slider-item -->
   <div class="list sec" ></div>
   <!-- /.slider-item -->
   <div class="list" ></div>
   <!-- /.slider-item -->
  </div>
 </div>
 <!-- /.wrap -->
</div>
<!-- /.wrapper -->

CSS：

.wrapper{
  position: absolute;
}

.slider {
    width: auto;
    margin: 30px 50px 50px;
    position: relative;
}
.list{
  padding-left: 10px;
  padding-right: 10px;
  width: 50px;
  height: 50px;
  background-color: #aeaeae;
}
.sec{
  background-color: red;
}


.slick-prev:before, 
.slick-next:before {
    color: black;    
}

.slick-dots {
    bottom: -30px;
}

js：

$(".slider").slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    dots: true,

});
javascript

1 个回答

  1. Best Answer

    您需要设置包装器的大小。

    查看jsfiddle示例

    /**

    This fiddle is using the latest version 
    of Slick (from master) and jQuery.

    If your issue occurs in older version or a 
    specific tag; please use the "External Resources" 
    section in the sidebar to correct it.

**/


$(".slider").slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  dots: true,

});
    .wrapper {
  position: absolute;
  width: calc(100vw - 16px);
}

.slider {
  width: auto;
  margin: 30px 50px 50px;
  position: relative;
}

.list {
  padding-left: 10px;
  padding-right: 10px;
  width: 50px;
  height: 50px;
  background-color: #aeaeae;
}

.sec {
  background-color: red;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}

.slick-dots {
  bottom: -30px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css">
<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css">
<div class="wrapper">
  <div class="wrap">
    <div class="slider">
      <div class="list"></div>
      <!-- /.slider-item -->
      <div class="list sec"></div>
      <!-- /.slider-item -->
      <div class="list"></div>
      <!-- /.slider-item -->
      <div class="list sec"></div>
      <!-- /.slider-item -->
      <div class="list"></div>
      <!-- /.slider-item -->
    </div>
  </div>
  <!-- /.wrap -->
</div>
<!-- /.wrapper -->

    • 0

相关问题