swiper制作抢购轮播、滑动或点击时获取对应的索引

swiper制作抢购轮播、滑动或点击时获取对应的索引

1. 当点击左右箭头时或者滑动轮播时获取对应的下标
2. 当直接点击轮播时获取对应的下标 代码中的标注我感觉很明确了 html代码：

<div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide timeSnapUpActBox">
                                <div class="timeSnapUpPrepareBox">
                                    <p>正在疯抢</p>
                                    <p>距结束 15:10:12</p>
                                </div>
                                <div class="timeSnapUpPrepareBox hideBox">20:00开抢</div>
                            </div>
                            <div class="swiper-slide ">
                                <div class="timeSnapUpPrepareBox hideBox">
                                    <p>正在疯抢</p>
                                    <p>距结束 15:10:12</p>
                                </div>
                                <div class="timeSnapUpPrepareBox">20:00开抢</div>
                            </div>
                            <div class="swiper-slide ">
                                <div class="timeSnapUpPrepareBox hideBox">
                                    <p>正在疯抢</p>
                                    <p>距结束 15:10:12</p>
                                </div>
                                <div class="timeSnapUpPrepareBox">20:00开抢</div>
                            </div>
                            <div class="swiper-slide ">
                                <div class="timeSnapUpPrepareBox hideBox">
                                    <p>正在疯抢</p>
                                    <p>距结束 15:10:12</p>
                                </div>
                                <div class="timeSnapUpPrepareBox">20:00开抢</div>
                            </div>
                        </div>
                    </div>
                     <!-- 左右箭头 -->
                <div class="timeSnapUpSwiper-left iconfont icon-jtLeft"></div>
                <div class="timeSnapUpSwiper-right iconfont icon-jtRight"></div>

js代码：

// swiper
        var swiper = new Swiper(.swiper-container, {
          
   
            slidesPerView: 7,
            spaceBetween: 0,
            centeredSlides: true,
            pagination: {
          
   
                el: .swiper-pagination,
                clickable: true,
            },
            navigation: {
          
   
                nextEl: .timeSnapUpSwiper-right,
                prevEl: .timeSnapUpSwiper-left,
            },
        });
        // 滑动-轮播或点击箭头时获取对应的索引 ==> 获取对应的数据
        // swiper.on 事件是swiper官网提供的
        swiper.on(slideChangeTransitionEnd, function () {
          
   
            let swiperIndex = swiper.activeIndex;
            console.log("索引值：" + swiperIndex);
            $(.timeSnapUpSwiperDiv .swiper-slide).eq(swiperIndex).addClass(timeSnapUpActBox).siblings()
                .removeClass(timeSnapUpActBox);
        });
        // 点击-轮播时获取对应的索引 ==> 获取对应的数据
        $(.timeSnapUpSwiperDiv .swiper-slide).click(function () {
          
   
            let clickSwiperIndex = $(this).index(.timeSnapUpSwiperDiv .swiper-slide);
            console.log(clickSwiperIndex);
            swiper.slideTo(clickSwiperIndex , 500, false); //切换到第一个slide，速度为1秒
            $(this).addClass(timeSnapUpActBox).siblings().removeClass(timeSnapUpActBox);
        })

最后，我把具体的代码打包上传了，需要的下载(你们不会需要的~)