网站的轮播都是用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();
})