首页 > 解决方案 > Carousel 在调整屏幕或在移动设备上滚动时消失

问题描述

我正在努力解决这个问题,它看起来有一些错误,但认为更熟悉这个问题的人可能能够解决它,或者至少为我指明正确的方向。

https://staging-digemaya.kinsta.cloud/online-courses/sleep-deeply-with-sophrology/

  <section class="sales-testimonials">
  <div class="st-intro">
    <div class="st-inner">
      {!! $the_intro !!}
    </div>
  </div>
  <div class="quotes-wrapper quotes-wrapper-scoped">
    <style scoped="">
  </style>
    <div class="quotes-bg {{ isset($idx) ? 'quotes-bg-' . $idx : '' }}"></div>
    <div class="quotes"
      data-cycle-fx="carousel"
      {{-- data-cycle-carousel-visible=2 --}}
      data-cycle-timeout="{!! $timeout + 3000 !!}"
      data-cycle-slides="> .quote"
      data-cycle-log="false"
      data-cycle-prev=".q-prev{{ isset($idx) ? '-' . $idx : '' }}"
      data-cycle-next=".q-next{{ isset($idx) ? '-' . $idx : '' }}"
      data-cycle-pager=".quotes-pager{{ isset($idx) ? '-' . $idx : '' }}"
    >
      @foreach ($the_quotes as $the_quote)
        <div class="quote q-{{ $loop->iteration }} qid-{!! $the_quote['id'] !!} @if (isset($cls)) {{ $cls }} @endif">
          <div class="d-flex flex-column align-items-center">
            @php
              $fimg = App::get_featured_image_by_ID($the_quote['id'])
            @endphp
            <div class="q-photo align-self-center align-self-xl-auto">
              <img src="{!! $fimg[0] !!}" width="{{ $fimg[1] }}" height="{{ $fimg[2] }}" alt="{{ $the_quote['by'] }}">
            </div>
            <div class="q-content align-self-center align-self-xl-auto">
              {!! $the_quote['quote'] !!}
              <p class="by">{{ $the_quote['by'] }}</p>
            </div>
          </div>
        </div>
      @endforeach
    </div>
    <div class="q-prev{{ isset($idx) ? '-' . $idx : '' }} d-none d-sm-block">{{ \BladeSvgSage\svg_image('next', 'svg-prev')->sprite() }}<span class="sr-only sr-focusable">{{ __('Previous quote', 'sage') }}</span></div>
    <div class="q-next{{ isset($idx) ? '-' . $idx : '' }} d-none d-sm-block">{{ \BladeSvgSage\svg_image('next', 'svg-next')->sprite() }}<span class="sr-only sr-focusable">{{ __('Next quote', 'sage') }}</span></div>
    <div class="quotes-pager{{ isset($idx) ? '-' . $idx : '' }} text-center"></div>
  </div>
</section>

标签: jquerywordpresstwitter-bootstrapmedia-queriescarousel

解决方案


推荐阅读