vue-carousel не работает на второй вкладке. когда я нажимаю на содержание tab2 это работает - PullRequest
Новая
       48

vue-carousel не работает на второй вкладке. когда я нажимаю на содержание tab2 это работает

0 голосов
/ 15 октября 2019

Я использую vue-cli3 в пакете vue-carousel. мой код в под свертке второй вкладке. когда я нажимаю второй слайдер вкладка не работает. после того, как я щелкну содержимое второй вкладки, будет показано, что слайдер, работающий на первой вкладке, показывает по умолчанию. другая скрытая вкладка не работает. 

 <div class="tab" role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
    <li role="presentation"><a href="#Section1" class="nav-link active" aria-controls="home" role="tab" data-toggle="tab">Jewellery</a></li>
    <li role="presentation"><a href="#Section2" class="nav-link" aria-controls="profile" role="tab" data-toggle="tab">Flower</a></li>
</ul>
<div class="tab-content tabs" id="myTabContent">
    <div role="tabpanel" class="tab-pane fade in active show" id="Section1">
        <div class="col-md-12 mt-2">
            <carousel :perPage=1   :loop="true"  :navigation-enabled="true"  navigationNextLabel='<span class="carousel-control-next-icon" aria-hidden="true"></span>' navigationPrevLabel='<span class="carousel-control-prev-icon" aria-hidden="true"></span>'  :paginationEnabled="false" :centerMode="false" :perPageCustom=[[780,3]]>
            <slide>
                <div class="item itemradius">
                    <div class="shadow-effect">
                        <img class="img-responsive itemradiusimag" src="@/assets/img/ring.png"
                            alt="">
                        <div class="item-details text-center whitecolor itemradiustext">
                            <p>Ring</p>
                            <p>Jewellery</p>
                            <h3>$513</h3>
                            </div>
                    </div>
                </div>
            </slide>
            <slide>
                <div class="item itemradius">
                    <div class="shadow-effect">
                        <img class="img-responsive itemradiusimag" src="@/assets/img/flower.png"
                            alt="">
                        <div class="item-details text-center whitecolor itemradiustext">
                            <p>Ring</p>
                            <p>Jewellery</p>
                            <h3>$513</h3>

                        </div>
                    </div>
                </div>
            </slide>
           </carousel>
        </div>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="Section2">
        <h3>Section 2</h3>
        <div class="col-md-12" >
        <carousel :perPage=1    :loop="true" :minSwipeDistance="20"   :navigation-enabled="true"  navigationNextLabel='<span class="carousel-control-next-icon" aria-hidden="true"></span>' navigationPrevLabel='<span class="carousel-control-prev-icon" aria-hidden="true"></span>'  :paginationEnabled="false"  :perPageCustom=[[780,3]]>
            <slide v-for="mobile in mobile_datas" v-bind:key="mobile.id">
                <div class="item itemradius">
                    <div class="shadow-effect">
                            <div class="hs-wrapper">
                            <img :src="mobile.avatar_url" style="height: 200px !important;"  class="img-responsive" />
                        </div> 
                        <h5><router-link :to="mobile.url">{{mobile.login}}</router-link></h5>
                        <div class="simpleCart_shelfItem">
                            <p><span>${{mobile.node_id}}</span> <i class="item_price">${{mobile.node_id}}</i></p>
                        </div>
                    </div>
                </div>
            </slide>
            </carousel>
        </div>
    </div>
</div>

...