Я работаю с совой-каруселью и хотел бы сделать вертикальный слайдер изображений. При добавлении элементов мне нужно разместить его под предыдущим изображением, а элементы должны скользить вертикально. Любая помощь? Вот мой код, подобный этому:
<div class="col-md-3 todayspecialcolumn">
<h1>Today's Special</h1>
<div class="row">
<div class="offset-md-1 col-md-10 todayspecial owl-carousel owl-theme">
<div class="items">
<div class="card todayspecialfood">
<div class="todaysimg">
<img src="{{url('public/images/fooditems/img4.jpg')}}" alt="foodimage.jpg" class="img-fluid">
</div>
<div class="row foodprice">
<div class="col-md-8">
<h5>Food name</h5>
</div>
<div class="col-md-4">
<h5>Rs 500</h5>
</div>
</div>
</div>
</div>
<div class="items">
<div class="card todayspecialfood">
<div class="todaysimg">
<img src="{{url('public/images/fooditems/img4.jpg')}}" alt="foodimage.jpg" class="img-fluid">
</div>
<div class="row foodprice">
<div class="col-md-8">
<h5>Food name</h5>
</div>
<div class="col-md-4">
<h5>Rs 500</h5>
</div>
</div>
</div>
</div>
<div class="items">
<div class="card todayspecialfood">
<div class="todaysimg">
<img src="{{url('public/images/fooditems/img4.jpg')}}" alt="foodimage.jpg" class="img-fluid">
</div>
<div class="row foodprice">
<div class="col-md-8">
<h5>Food name</h5>
</div>
<div class="col-md-4">
<h5>Rs 500</h5>
</div>
</div>
</div>
</div>
<div class="items">
<div class="card todayspecialfood">
<div class="todaysimg">
<img src="{{url('public/images/fooditems/img4.jpg')}}" alt="foodimage.jpg" class="img-fluid">
</div>
<div class="row foodprice">
<div class="col-md-8">
<h5>Food name</h5>
</div>
<div class="col-md-4">
<h5>Rs 500</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
и js код выглядит следующим образом:
$('.todayspecial').owlCarousel({
loop:true,
dots:false,
autoplay:true,
autoplayTimeout:1000,
animateOut: 'slideOutUp',
animateIn: 'slideInUp',
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}
})
этот код отображает одно изображение, которое скользит по следующему изображению по вертикали, но я хочу разместить 3 изображения элементов по вертикали, а затем скользить по вертикали.