主页 / 问题 / 885240
Accepted
elossa
Asked:2020-09-25 15:42:26 +0000 UTC2020-09-25 15:42:26 +0000 UTC

猫头鹰旋转木马 - 物品的固定宽度

  • 772

有没有办法为 owl-carousel 中的项目设置固定大小？

javascript

1 个回答

  1. Best Answer

    文章 -自动宽度

    1) 选项。 

    $('.owl-carousel').owlCarousel({
    margin:10,
    loop:true,
    autoWidth:true,
    items:4
})
    .owl-carousel .item {
    height: 10rem;
    background: #4DC7A0;
    padding: 1rem;
}

.owl-carousel .item h4 {
    color: #FFF;
    font-weight: 400;
    margin-top: 0rem;
}
.owl-carousel {
    margin: 2rem 0;
}
    <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
 

<div class="owl-carousel owl-theme" >
    <div class="item" style="width:250px"><h4>1</h4></div>
    <div class="item" style="width:100px"><h4>2</h4></div>
    <div class="item" style="width:500px"><h4>3</h4></div>
    <div class="item" style="width:100px"><h4>4</h4></div>
    <div class="item" style="width:50px"><h4>6</h4></div>
    <div class="item" style="width:250px"><h4>7</h4></div>
    <div class="item" style="width:120px"><h4>8</h4></div>
    <div class="item" style="width:420px"><h4>9</h4></div>
    <div class="item" style="width:120px"><h4>10</h4></div>
    <div class="item" style="width:300px"><h4>11</h4></div>
    <div class="item" style="width:450px"><h4>12</h4></div>
    <div class="item" style="width:220px"><h4>13</h4></div>
    <div class="item" style="width:150px"><h4>14</h4></div>
    <div class="item" style="width:600px"><h4>15</h4></div>
</div>

    选项 2。 

    .item{ 
    width: 100% !important; 
}
    • 2

相关问题