循环中的 Owl-carousel-o 返回宽度为 0 的 owl 项目

问题描述

在手风琴中使用多个 owl-carousel-o 时会返回宽度为 0 的 owl 项目。我期待每张幻灯片内都有一个全宽图像。由于猫头鹰项目宽度为零，图像缩小到左侧。仅当网站处于移动视图时才会发生这种情况 html页面

<div class="accordion dis767" id="BigData" style="display:none">
  <div *ngFor="let det of categories">
    <div class="card card-collrn" style="margin-bottom:5px;border: none; cursor: pointer;">
      <div class="card-header learningbtn" id="{{det.id}}">
         <div class="row">
            <div class="col-md-4 pane-title"  data-toggle="collapse"
                            [attr.data-target]="'#_test'+det.id" aria-expanded="false"
                            aria-controls="collapSEOne" style="text-align:left">{{det.title}}</div>
             </div>
             </div>
             <div [id]="'_test'+det.id" class="collapse" aria-labelledby="headingOne"
                        data-parent="#BigData">
                <div class="card-body">
                   <owl-carousel-o class="no-indicators "  [options]="exploreOptions">
                      <ng-template carouselSlide *ngFor="let longterm of courses">                                       
                        <div class="col-6 col-exp-img" style="background: url({{longterm.poster}});">
                                                <div class="crs-tite">
                                                    <div>{{ longterm.category}} </div>
                                                </div>                                              
                                            </div>                                               
                                </ng-template>            
                            </owl-carousel-o>                                 
                        </div>
                    </div>
                </div>
            </div> 
        </div>

ts 页面

 exploreOptions: OwlOptions = {
    loop: true,autoplay:true,mouseDrag: true,touchDrag: true,pullDrag: true,dots: false,navSpeed: 700,navText: ['',''],// items:1,responsive: {
        0: {
            items: 1
          },400: {
        items: 1
      },},nav: false
 

输出

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）