主页 / 问题 / 681922
Accepted
Игорь
Asked:2020-06-21 18:19:05 +0000 UTC2020-06-21 18:19:05 +0000 UTC

猫头鹰旋转木马2。居中时如何更改侧滑的宽度：true

  • 772

下午好。我正在使用以幻灯片为中心的 owlcarousel2。我们需要增加中心元素的宽度，因为 在移动版中，侧边幻灯片占用了太多空间。如何更改侧滑的宽度（在下面的屏幕截图中突出显示）？ 沙盒。

在此处输入图像描述

$('.owl-carousel').owlCarousel({
    margin:10,
    loop:true,
    items:2,
    center:true
})
.owl-item {
  height: 230px;
  background: #d3d3d3;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>


<div class="owl-carousel">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

javascript

2 个回答

  1. Best Answer

    元素的宽度取决于 property items，它可以是一个真实的值。

    $('.owl-carousel').owlCarousel({
    margin:10,
    loop:true,
    items:1.2,
    center:true    
})
    • 1

  2. 使用 stagePadding https://owlcarousel2.github.io/OwlCarousel2/demos/stagepadding.html

    例子

    $('.owl-carousel').owlCarousel({
    margin:10,
    loop:true,    
    center:true,
    stagePadding: 150,
    responsive:{
        0:{
            items:1,
            stagePadding: 50
        },
        600:{
            items:1,
            stagePadding: 100
        },
        1000:{
            items:1
        }
    }
})
    .owl-item {
  height: 230px;
  background: #d3d3d3;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" rel="stylesheet"/>
<div class="owl-carousel">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

    • 1

相关问题