Question

我正在使用bootstrap 4和owl carousel 2的网站上创建幻灯片。我是否需要将导航放在幻灯片上，如何做到这一点，请参阅下面的代码：

注意：我需要在容器内进行导航，不要获得窗口宽度的100％。

HTML

<section class="slide">
    <div class="owl-carousel">
        <div class="item"><img src="/img/laminas/lamina-01.jpg"></div>
        <div class="item"><img src="/img/laminas/lamina-01.jpg"></div>
    </div>
    <div class="container">
        <div class="nav-container"></div>
    </div>
</section>

JS

$('.owl-carousel').owlCarousel({
    loop:true,
    items:1,
    autoplay:true,
    autoplayHoverPause:true,
    nav:true,
    navText:['<div class="nav-slide"><i class="flaticon-arrows-1"></i></div>', '<div class="nav-slide"><i class="flaticon-arrows"></i></div>'],
    navContainer:'.nav-container'
})

Answer 1

我建议使用flexbox css。 justify-content: center会水平对齐，align-content: center或align-items: center将垂直居中。

Answer 2

<section class="slide">
    <div class="owl-carousel">
        <div class="item"><img src="/img/laminas/lamina-01.jpg"></div>
        <div class="item"><img src="/img/laminas/lamina-01.jpg"></div>
    </div>
    <div class="slide-content">
      <div class="container">
          <div class="nav-container"></div>
      </div>
    </div>
</section>

.slide {
  position: relative;
}
.slide .slide-content {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  left: 0;
  right: 0;
  z-index: 9999;
}

这会将导航放在幻灯片的中心。如果你想在底部调整适合

Answer 3

没有你的CSS，我猜这里有点，但我把一个快速的例子放在一起，以显示导航如何设置为不拉伸100％宽度;

http://jsfiddle.net/8qhfj6u2/

<强> HTML

<div class="owl-carousel">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
</div>
<div class="container">
  <div class="nav-container"></div>
</div>

<强> CSS

body{
  background: #ccc;
}

.owl-carousel .item {
    height: 10rem;
    background: #4DC7A0;
    padding: 1rem;
}
.container{
    height: 300px;
    width: 400px;
    margin: 0 auto;
    background: #000;
    display: flex;
    align-items: center;
}
.nav-container{
    background: #fff;
    width: 300px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 5px;
}

<强>的JavaScript

$(document).ready(function () {
    $('.owl-carousel').owlCarousel({
        loop:true,
        items:1,
        autoplay:true,
        autoplayHoverPause:true,
        nav:true,
        navText:['<div class="prev">Previous</div>','<div class="next">Next</div>'],
        navContainer:'.nav-container'
    })
});

将div sibiling放在另一个div的垂直中心

3 个答案: