swiper tab 切換後自動輪播
阿新 • • 發佈:2019-01-10
網站的輪播都是用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(); })