无法设置固定宽度和中心自定义滚动条

时间：2018-05-28 12:16:03

标签： javascript css carousel

我正在研究某种水平对齐物品的旋转木马。

每个子元素（其中将有大约十几个）应该延伸父母宽度的三分之一。任何时候都应该看到三个项目。

我使用 Bootstrap 4 ，一些自定义 CSS 和 Perfect-scrollbar plugin 。

＆＃13;
＆＃13; 
var ps = new PerfectScrollbar('#carousel');
＆＃13; 
html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
.page-wrapper {
  min-height: 100%;
}
.hero {
  height: 100vh;
  background: #212121;
  justify-content: center;
  align-items: center;
}

#carousel {
  display: flex;
  list-style-type: none;
  position: relative;
  margin: 0;
  padding: 0;
  justify-content: left;
  align-items: center;
}
#carousel li {
  padding: 0 0 70px 0;
}
#carousel a {
  text-decoration: none;
  color: #fff;
}
#carousel img {
  display: block;
  width: 100%;
}
#carousel .caption {
  padding: 20px 20px 0 20px;
}
#carousel h2 {
  font-size: 20px;
  line-height: 1;
  margin: 0;
  padding: 0;
}
#carousel p {
  font-size: 10px;
  padding: 0;
  margin: 5px 0 0 0;
}
#carousel .ps__rail-x {
  background: #5C5C5C;
  height: 3px;
  margin: 0 auto;
}
#carousel .ps__thumb-x {
  height: 3px;
  margin-bottom: -2px;
  border-radius: 0;
  background: #fff;
}
＆＃13; 
<link href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//rawgit.com/utatti/perfect-scrollbar/master/css/perfect-scrollbar.css" rel="stylesheet"/>
<script src="//rawgit.com/utatti/perfect-scrollbar/master/dist/perfect-scrollbar.js"></script>
<div class="page-wrapper">
  <div class="hero d-flex">
    <div class="container-fluid p-0">
      <ul id="carousel">
        <li class="col-xs-12 col-sm-6 col-md-4">
          <a href="#">
        <img src="https://placeimg.com/600/400/people" alt="">
        <div class="caption">
          <h2>Lorem</h2>
          <p>A true story</p>
        </div>
        </a>
        </li>
        <li class="col-xs-12 col-sm-6 col-md-4">
          <a href="#">
        <img src="https://placeimg.com/600/400/nature" alt="">
        <div class="caption">
          <h2>Lorem ipsum</h2>
          <p>Lorem ipsum. Dolor sit amet.</p>
        </div>
        </a>
        </li>
        <li class="col-xs-12 col-sm-6 col-md-4">
          <a href="#">
        <img src="https://placeimg.com/600/400/arch" alt="">
        <div class="caption">
          <h2>Lorem</h2>
          <p>Lorem ipsum. Dolor sit amet</p>
        </div>
        </a>
        </li>
        <li class="col-xs-12 col-sm-6 col-md-4">
          <a href="#">
        <img src="https://placeimg.com/600/400/animals" alt="">
        <div class="caption">
          <h2>Into the wild</h2>
          <p>Lorem ipsum dolor sit amet, consectetur</p>
        </div>
        </a>
        </li>
      </ul>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

它非常好，除了我一直在努力寻找一种方法来为轨道设置固定宽度（300px）并且居中< / strong>它。我怎样才能做到这一点？

2 个答案:

答案 0 :(得分：0)

您可以将class ScannerWrapperFragment : Fragment() { private val navController by lazy { NavHostFragment.findNavController(this) } override fun onResume() { super.onResume() // forward the call to ScannerActivity // do it in onResume to prevent call duplication from configuration changes val intent = Intent(context, ScannerActivity::class.java) startActivityForResult(intent, 4304357) } override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) { if (requestCode == 4304357) { if (resultCode == RESULT_OK) { val params = Bundle().apply { putString("scan_result", data?.extras?.getString("scan_result")) } //present the scan results to the navigation graph navController.navigate(R.id.action_scanner_to_result_screen, params) } else { navController.popBackStack() } } else { super.onActivityResult(requestCode, resultCode, data) } } } 传递给maxScrollbarLength个实例，并将其值设置为所需的拇指宽度。 像这样：

PerfectScrollbar

看一下这个演示：Source

答案 1 :(得分：0)

我得到了预期的效果

.ps__rail-x {margin: 0 35%;}

和

var ps = new PerfectScrollbar('#carousel', {
  maxScrollbarLength: 150
});


var ps = new PerfectScrollbar('#carousel', {
  maxScrollbarLength: 150
});
html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
.page-wrapper {
  min-height: 100%;
}
.hero {
  height: 100vh;
  background: #212121;
  justify-content: center;
  align-items: center;
}
#carousel {
  display: flex;
  list-style-type: none;
  position: relative;
  margin: 0;
  padding: 0;
  justify-content: left;
  align-items: center;
}
#carousel li {
  padding: 0 0 70px 0;
}
#carousel a {
  text-decoration: none;
  color: #fff;
}
#carousel img {
  display: block;
  width: 100%;
}
#carousel .caption {
  padding: 20px 20px 0 20px;
}
#carousel h2 {
  font-size: 20px;
  line-height: 1;
  margin: 0;
  padding: 0;
}
#carousel p {
  font-size: 10px;
  padding: 0;
  margin: 5px 0 0 0;
}
#carousel .ps__rail-x {
  background: #5C5C5C;
  height: 3px;
  margin: 0 35%;
}
#carousel .ps__thumb-x {
  height: 3px;
  margin-bottom: -2px;
  border-radius: 0;
  background: #fff;
}
<link href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//rawgit.com/utatti/perfect-scrollbar/master/css/perfect-scrollbar.css" rel="stylesheet"/>
<script src="//rawgit.com/utatti/perfect-scrollbar/master/dist/perfect-scrollbar.js"></script>
<div class="page-wrapper">
  <div class="hero d-flex">
    <div class="container-fluid p-0">
      <ul id="carousel">
        <li class="col-xs-12 col-sm-6 col-md-4">
          <a href="#">
        <img src="https://placeimg.com/600/400/people" alt="">
        <div class="caption">
          <h2>Lorem</h2>
          <p>A true story</p>
        </div>
        </a>
        </li>
        <li class="col-xs-12 col-sm-6 col-md-4">
          <a href="#">
        <img src="https://placeimg.com/600/400/nature" alt="">
        <div class="caption">
          <h2>Lorem ipsum</h2>
          <p>Lorem ipsum. Dolor sit amet.</p>
        </div>
        </a>
        </li>
        <li class="col-xs-12 col-sm-6 col-md-4">
          <a href="#">
        <img src="https://placeimg.com/600/400/arch" alt="">
        <div class="caption">
          <h2>Lorem</h2>
          <p>Lorem ipsum. Dolor sit amet</p>
        </div>
        </a>
        </li>
        <li class="col-xs-12 col-sm-6 col-md-4">
          <a href="#">
        <img src="https://placeimg.com/600/400/animals" alt="">
        <div class="caption">
          <h2>Into the wild</h2>
          <p>Lorem ipsum dolor sit amet, consectetur</p>
        </div>
        </a>
        </li>
      </ul>
    </div>
  </div>
</div>

相关问题
最新问题