swiper 选项卡激活指定的swiper-slide

2020-04-15 浏览:3739
swiper 选项卡激活指定的swiper-slide
评论:(0)复制地址

直接上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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>


评论:(0)复制地址
发布:苗景云 | 分类:IT技术&设计 | Tags:swiper js
上一篇：google图标字体material icons图标调用代码 下一篇：phpcms V9一、二级导航栏目loop循环输出、当前高亮显示

相关文章

判断主域名的js代码2023-03-30

JS qrcode.js当前页面生成二维码并保存jpg2020-09-16

Uncaught TypeError: Cannot read property 'top' of undefined错误应该如何解决2019-07-13

发表评论:

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。