How to use the swiper in tabs

1

Only tab-1 available

                    <div id="tab-1" class="tab active">

                        <div data-pagination=".swiper-pagination" data-pagination-hide="true"
                             class="swiper-container swiper-init ks-demo-slider">
                            <div class="swiper-pagination"></div>
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" data-swiper-autoplay="2000"><img src="img/01.jpg"
                                                                                           width="100%"
                                                                                           height="100"/></div>
                                <div class="swiper-slide" data-swiper-autoplay="2000"><img src="img/02.jpg"
                                                                                           width="100%"
                                                                                           height="100"/></div>
                            </div>
                        </div>

                    </div>

                    <div id="tab-2" class="tab">

                        <div data-pagination=".swiper-pagination" data-pagination-hide="true"
                             class="swiper-container swiper-init ks-demo-slider">
                            <div class="swiper-pagination"></div>
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" data-swiper-autoplay="2000"><img src="img/01.jpg"
                                                                                           width="100%"
                                                                                           height="100"/></div>
                                <div class="swiper-slide" data-swiper-autoplay="2000"><img src="img/02.jpg"
                                                                                           width="100%"
                                                                                           height="100"/></div>
                            </div>
                        </div>

                    </div>
                </div>
2

I do meet this problem, could anyone please tell me how to fix it?

3

Might be a problem with the same class names used across the tabs. For example the data-pagination-attribute should lead to a “unique” class like .tab1-swiper-paginagion .

4

Hi @Tcrazy_X,

I found a solution that might solve this problem.

You could initiate swiper in ‘tab:init’ function manually.

1 Like