问题描述
我在我的 Laravel 应用程序中集成了一个 owl carousel 滑块(试图让它变得动态)。我想显示 4 个产品,并修改代码以便在两侧显示下一个和上一个按钮。但是对齐有缺陷。我在这里分享滑块的图像视图:请检查照片,所有问题都在那里描述
我的代码是:
<div class="owl-carousel owl-theme">
@foreach($bootcamps as $bootcamp)
<div>
<div class="bootcamp-card">
<div class="row">
<div class="col-12 col-md-12">
<div class="row bootcamp-thumbnail" style="overflow:
hidden">
<img
style="width:100%!important;height:100%!important" src="
{{asset('img/cart/course-thumb.png')}}" alt="">
</div>
<div class="row bootcamp-category p-0 pt-2">
<div class=""><span class="course-type">Ethical
hacking</span> <span class="certification">certificate</span></div>
</div>
<div class="row bootcamp-title">
Threat Hunting using Wireshark
</div>
<div class="row bootcamp-info">
<table>
<tr>
<td style="width: 40%"><b>Programs :</b>
</td>
<td style="width: 60%">Online Live
Class</td>
</tr>
<tr>
<td><b>Location :</b></td>
<td>{{$bootcamp->location}}</td>
</tr>
<tr>
<td><b>Cost :</b></td>
<td><b>${{$bootcamp->cost}}</b></td>
</tr>
<tr>
<td><b>Date :</b></td>
<td>{{date('jS M,Y',strtotime($bootcamp-
>event_start))}} – {{date('jS M,strtotime($bootcamp->event_end))}}</td>
</tr>
</table>
</div>
<div class="row p-0 pt-2">
<a href="#" class="form-control book-button"
style="text-align: center;" data-toggle="modal"
data-target="#bootcamp-registration">Book
Now</a>
<a href="{{url('cart')}}" class="add-to-cart">Add
to cart</a>
</div>
</div>
</div>
</div>
</div>
@endforeach
<div class="owl-controls">
<div class="owl-nav">
<div class="owl-prev">Prev</div>
<div class="owl-next">Next</div>
</div>
<div class="owl-dots">
<div class="owl-dot active"><span></span></div>
<div class="owl-dot"><span></span></div>
<div class="owl-dot"><span></span></div>
</div>
</div>
</div>
</div>
来自 jQuery 的代码:
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,autoplay :true,dots :false,margin:10,responsiveClass:true,responsive:{
0:{
items:1,nav:true
},600:{
items:2,1000:{
items:4,nav:true,loop:true,navText : ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<I
class="fa fa-angle-right" aria-hidden="true"></i>']
}
}
})
});
来自 CSS 的代码:
.owl-prev {
width: 15px;
height: 100px;
position: absolute;
top: 40%;
margin-left: -70px;
display: block !important;
border:0px solid black;
outline:none!important;
font-size: 100px;
}
.owl-next {
width: 15px;
height: 100px;
position: absolute;
top: 40%;
right: -15px;
display: block !important;
border:0px solid black;
outline:none!important;
font-size: 20px;
}
.owl-prev i,.owl-next i {transform : scale(1,6); color: #ccc;}
.fa-angle-left,.fa-angle-right{
width:60px;
height:15px;
background: rgba(0,0.3);
color: white!important;
font-size:15px!important;
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)