javascript - Swiper JS 自动播放在 Laravel + Bootstrap 中移动到其他选项卡面板后停止

Question

我是 Laravel 的新手，正在使用 swiper 库 ( http://idangero.us/ ) 作为 slider 。

我的幻灯片工作正常，但问题是移动到另一个选项卡后自动播放停止。我已经尝试了 update、startAutoPlay 和 init 方法，但不起作用。我需要创建顶部带有选项卡菜单的 slider ，单击选项卡菜单时，会显示选项卡菜单类别中的图像。这是我的代码:

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/34226012370_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();
                });
            });