swiper tab 切换后自动轮播

网站的轮播都是用swiper做的

https://www.swiper.com.cn/

有一个需求,就是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();
  })

猜你喜欢

转载自blog.csdn.net/tang05709/article/details/82112997