1. 程式人生 > >swiper tab 切換後自動輪播

swiper tab 切換後自動輪播

網站的輪播都是用swiper做的

有一個需求,就是tab切換下的輪播,把tab做好後,點選tab後輪播不居然不自動切換,百度、bing都用了,都說了一個東西

observer

但這玩意兒還是不起作用,無奈,只好做點選後再次呼叫切換事件

<div class="list-active-tab course-types-tab">
      <div class="container">
        <div class="row pull-right">
           <ul class="list-tabs clearfix">
              @foreach($brand_advantages as $data)
              <li>
                {{ $data->title }}
                <div class="desc desc-{{ $loop->iteration }}">
                @foreach(explode_content($data->content) as $sdata)
                @if($loop->index == 0)
                <h3>{{ $sdata }}</h3>
                @else 
                <p>{{ $sdata }}</p>
                @endif
                @endforeach
                </div>
              </li>
              @endforeach
           </ul>
        </div>
      </div>
    </div>
    <div class="list-active-content course-types-content">
      @foreach($brand_advantages as $data)
      @if ($loop->first)
      <div class="list-contents course-banner course-banner-l{{ $loop->index }} c-active">
      @else 
      <div class="list-contents course-banner course-banner-l{{ $loop->index }}">
      @endif
        <div class="swiper-wrapper">
          @if($data->images)
          @foreach(json_decode_images($data->images) as $sdata)
          <div class="swiper-slide"><img src="{{ config('app.oss_url') . $sdata }}" alt="{{ $sdata }}" /></div>
          @endforeach
          @endif
        </div>
      </div>
      @endforeach
    </div>
// 課程優勢輪播
  tab_swiper();
  function tab_swiper() {
    var swiperTabContent0 = new Swiper('.course-banner', {
      autoplay: true,
      slidesPerView: 3,
      spaceBetween: 0,
      loop: true,
    });
  }
  
  // 優勢tab切換
  $('.list-active-tab .list-tabs li').click(function() {
    var liIndex = $(this).index();
    var listContents = $('.list-active-content .list-contents');
    $(this).siblings().removeClass('c-active');
    $(this).addClass('c-active');
    listContents.removeClass('c-active');
    var currentContent = listContents.eq(liIndex);
    currentContent.addClass('c-active');
    // 解決延遲問題
    var imageWidth = windowWidth / 3;
    var imageCount = currentContent.find('img').length;
    var maxLength = imageWidth * imageCount;
    currentContent.find('.swiper-slide').css('width', imageWidth + 'px');
    tab_swiper();
  })