我正在使用猫头鹰传送带,并且想制作一个垂直图像滑块。在添加项目时,我需要将其放置在上一张图片的下方,并且这些项目需要垂直滑动。有什么帮助吗? 这是我的代码,如下所示:
<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个图像项,然后垂直滑动。