苗景云的博客

直接上代码

<div class="pro-name">
				<ul>
					{pc:content action="category" siteid="1" catid="$top_parentid"  num="10"  return="data"}
					{loop $data $n $r}
					{php $num++}
					<li {if $catid==$r[catid]}class="on"{/if}>{$r[catname]}</li>
					{/loop}
					{/pc}
				</ul>
			</div>
			<div class="pro-list">
				<div class="swiper-wrapper">
					{pc:content action="category" catid="$top_parentid" num="20" order="listorder DESC"}
					{loop $data $precateid}
					{php $precateid = $precateid[catid]}
						<div class="swiper-slide">
							<ul class="product-con-group clearfix list-ver">
								{pc:content action="lists" catid="$precateid" num="50" order="listorder DESC"}
								{loop $data $v}
								<li class="product-con-group-inner">
									<a href="{$v['url']}" title="{$v['title']}">
									<div class="product-img"><span>{if $v[thumb]}<img src="{$v[thumb]}" alt="{$v[title]}" isinit="true">{else}<img src="{siteurl($siteid)}/images/layout/no_pro_img.jpg" alt="{$v[title]}" />{/if}</span></div>
									<div class="product-name">
										<h5>{$v[title]}</h5>
									</div>
									</a>
								</li>
								{/loop}
								{/pc}
							</ul>
						</div>
					{/loop}
					{/pc}
				</div>
			</div>

JS代码，需要调用jQuery

<script type="text/javascript">
	   var index = $('.on').index('.pro-name li');
	   var prolistSwiper = new Swiper('.pro-list', {
		initialSlide :index,
		speed: 500,
		on: {
			slideChangeTransitionStart: function () {
				$(".pro-name .on").removeClass('on');
				$(".pro-name li").eq(this.activeIndex).addClass('on');
			}
		}
		});
		$(".pro-name li").on('click', function (e) {
			e.preventDefault()
			$(".pro-name .on").removeClass('on')
			$(this).addClass('on')
			prolistSwiper.slideTo($(this).index())
			
            var index = "2"; // index为指定将要切换到的slide的索引
            swiper.slideTo(index, 100, false);  
		});
</script>