Swiper Pagination没有显示

Question

我仍然是laravel的新手，并使用swiper js。我正在尝试使用swiper库javascript（http://idangero.us/swiper/api/）创建图像滑块（使用3D立方体效果）。问题是我需要创建分页，我已经尝试按照演示，但我的分页没有显示。这是我的代码：

这是我的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: 1500,
                loop: true,
                grabCursor: true,
                autoplayDisableOnInteraction: false,
                cubeEffect: {
                    shadow: true,
                    slideShadows: true,
                    shadowOffset: 20,
                    shadowScale: 0.94,
                },
                observer: true,
                observeParents: true,
                pagination: {
                    el: '.swiper-pagination',
                    type: 'bullets',
                    dynamicBullets: true,
                },
            });

            console.log(swiper);

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

    </script>
@endsection