スワイパーJS自動再生は、laravel + bootstrap内の他のタブパネルに移動した後に停止しました

Question

laravelで新しく、スライダーにswiperライブラリー（http://idangero.us/）を使用しています。

マイスライドは完全に機能しますが、別のタブに移動した後に自動再生が停止されるという問題があります。私はすでにupdate、startAutoPlay、およびinitメソッドを試していますが、動作しません。私は上部にタブメニューを持つスライダを作成する必要があり、タブメニューをクリックすると、タブメニューカテゴリからの画像が表示されます。ここに私のコードは次のとおりです。解決

Gallery.blade.php

@extends('layouts.template') 

@section('title', trans('labels.home')) 

@section('other-style') 
    <link href="{{asset('css/global.css')}}" rel="stylesheet"> 
    <link href="{{asset('css/gallery.css')}}" rel="stylesheet"> 
    <link href="{{asset('css/swiper.min.css')}}" rel="stylesheet"> 

@endsection 

@section('main') 
    <section id="floor-content"> 
     <div class="container"> 
      <h1 class="text-center mh-title-h1">@lang('labels.galery')</h1> 
      <section id="gallery-section"> 
       <!-- Nav tabs --> 
       <ul class="nav nav-pills nav-justified mh-nav-pills" role="tablist"> 
        <li role="presentation" class="active"><a href="#display" aria-controls="home" role="tab" data-toggle="pill">@lang('labels.display')</a></li> 
        <li role="presentation"><a href="#visit" aria-controls="visit" role="tab" data-toggle="pill">@lang('labels.visit')</a></li> 
        <li role="presentation"><a href="#others" aria-controls="others" role="tab" data-toggle="pill">@lang('labels.others')</a></li> 
       </ul> 

       <!-- Tab panes --> 
       <div class="tab-content" style="margin-top: 200px;"> 
        <div role="tabpanel" class="tab-pane active" id="display"> 
         <div class="swiper-container"> 
          <div class="swiper-wrapper"> 
           <div class="swiper-slide" style="background-image: url('{{asset('images/galleries/beateau_musee_marine580.jpg')}}'); height: 300px; width: auto;"></div> 
           <div class="swiper-slide" style="background-image: url('{{asset('images/galleries/Echard_Houssay_ill_01-900w.jpg')}}'); height: 300px; width: auto;">></div> 
           <div class="swiper-slide" style="background-image: url('{{asset('images/galleries/full_Musee-national-de-la-Marine-4.jpg')}}'); height: 300px; width: auto;">></div> 
          </div> 
          <!-- Add Pagination --> 
          <div class="swiper-pagination"></div> 
         </div> 
        </div> 
        <div role="tabpanel" class="tab-pane" id="visit"> 
         <div class="swiper-container"> 
          <div class="swiper-wrapper"> 
           <div class="swiper-slide" style="background-image: url('{{asset('images/galleries/34226_d815695c43_c.jpg')}}'); height: 300px; width: auto;"></div> 
           <div class="swiper-slide" style="background-image: url('{{asset('images/galleries/Maritime_ControlPanel-min.jpg')}}'); height: 300px; width: auto;"></div> 
           <div class="swiper-slide" style="background-image: url('{{asset('images/galleries/MM 4.jpg')}}'); height: 300px; width: auto;"></div> 
          </div> 
          <!-- Add Pagination --> 
          <div class="swiper-pagination"></div> 
         </div> 
        </div> 
        <div role="tabpanel" class="tab-pane" id="others"> 
         <div class="swiper-container"> 
          <div class="swiper-wrapper"> 
           <div class="swiper-slide" style="background-image: url('{{asset('images/galleries/other_image_slider1.jpg')}}'); height: 300px; width: auto;"></div> 
           <div class="swiper-slide" style="background-image: url('{{asset('images/galleries/other_image_slider2.jpg')}}'); height: 300px; width: auto;"></div> 
           <div class="swiper-slide" style="background-image: url('{{asset('images/galleries/other_image_slider3.jpeg')}}'); height: 300px; width: auto;"></div> 
          </div> 
          <!-- Add Pagination --> 
          <div class="swiper-pagination"></div> 
         </div> 
        </div> 
       </div> 
      </section> 
      <a href="{{url('display')}}" class="btn mh-btn btn-lg center-block" style="width: 400px; margin-top: 20px;">@lang('labels.continue') @lang('labels.exploring') <span class="glyphicon glyphicon-arrow-right"></span> @lang('labels.display') @lang('labels.item')</a> 
     </div> 
    </section> 
@endsection 

@section('other-script') 
    <script src="{{asset('js/swiper.min.js')}}"></script> 
    <script> 
     $(document).ready(function() { 
      var swiper = new Swiper('.swiper-container', { 
       effect: 'cube', 
       speed: 700, 
       autoplay: 3000, 
       loop: true, 
       grabCursor: true, 
       autoplayDisableOnInteraction: false, 
       cubeEffect: { 
        shadow: true, 
        slideShadows: true, 
        shadowOffset: 20, 
        shadowScale: 0.94, 
       }, 
       observer: true, 
       observeParents: true, 
       pagination: { 
        el: '.swiper-pagination', 
       }, 
      }); 

      console.log(swiper); 

      $("li[role='presentation']").children("a").click(function() { 
       var swiper = $('.swiper-container'); 
       $.each(swiper, function(index, value) { 
        value.swiper.update(); 
       }); 
      }); 
     }); 

    </script> 
@endsection 

Answer 1

、私は自動再生を停止して再起動する必要があります。

$("li[role='presentation']").children("a").click(function() { 
       var gallerySwiper = $('.swiper-container'); 
       $.each(gallerySwiper, function(index, value) { 
        value.swiper.stopAutoplay(); 
        value.swiper.startAutoplay(); 
       }); 
      });