Owl carousel - фиксированный Width для items

171
12 января 2019, 22:10

Можно ли как-нибудь задать фиксированный размер для items в owl-carousel?

Answer 1

Статья - AutoWidth

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; 
} 
READ ALSO
Как реализовать step by step?

Как реализовать step by step?

Скрываем все панели кроме первой добавляя класс hiddenПри нажатии на Далее текущую панель скрываем, а следующую показываем

180
Зависимые select2

Зависимые select2

имею обычный select к которому применен select2

197
Как сделать эффект преломления света на изображении [закрыт]

Как сделать эффект преломления света на изображении [закрыт]

Реально ли сделать такой эффект с помощью css или js?

150