AnythingSlider直接进入最后一张幻灯片

Question

我正在尝试在bootstrap的轮播中使用AnythingSlider。我使用轮播进行网站导航，我想将AnythingSlider作为背景幻灯片放映。但是我遇到了一些问题。

我使用的每个滑块（bxslider，owl.carousel，anythingSlider）在我将其嵌入网站时直接进入最后一张幻灯片。它也不会重新开始。

jQuery的：

$ (document).ready(function() {
    $('a.slide-link')
        .wrap('<li class="slide-list-item"></li>');
    $('li.slide-list-item')
        .wrapAll('<ul id="slide-list"></ul>');
    $('ul#slide-list')
        .wrapAll('<div class="wrapper"></div>');
    $('div.wrapper')
        .wrapAll('<div class="anythingSlider internalSlider"></div>');

    if(banners.length > 1){
        autoplayval= true;
    } else {
        autoplayval= false;
    }
    $('.anythingSlider')
        .anythingSlider({
            easing: "swing",                // Anything other than "linear" or "swing" requires the easing plugin
            autoPlay: true,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not
            startStopped: false,            // If autoPlay is on, this can force it to start stopped
            delay: 1000,                    // How long between slide transitions in AutoPlay mode
            animationTime: 600,             // How long the slide transition takes
            hashTags: false,                 // Should links change the hashtag in the URL?
            buildNavigation: true,          // If true, builds and list of anchor links to link to each slide
            pauseOnHover: false,             // If true, and autoPlay is enabled, the show will pause on hover
            startText: "Start",             // Start text
            stopText: "Stop",               // Stop text
            navigationFormatter: null       // Details at the top of the file on this use (advanced use)
        });
    $('a.slide-link').show();
});

$(document).ready(function() {  
    $("#myCarousel").swiperight(function() {  
        $(this).carousel('prev');  
    });  

    $("#myCarousel").swipeleft(function() {  
        $(this).carousel('next');  
    });  
});  

HTML：

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Start Bootstrap</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="text-align: right; float: right; color: black;" >
            <ul class="nav navbar-nav" style="text-align: right; float: right; color: black;">

                <li>
                   <a href="#myCarousel" data-slide-to="6">MEMBERSHIP</a>
                </li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                       LANGUAGES 
                       <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                       <li><a href="#">ENGLISH</a></li>
                       <li class="divider"></li>
                       <li><a href="#">TEST</a></li>
                       <li><a href="#">TEST</a></li>
                       <li><a href="#">TEST</a></li>
                       <li><a href="#">TEST</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>
<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel slide">
    <!-- Indicators -->

    <!-- Wrapper for Slides -->
    <div class="carousel-inner">
        <div class="item active">
            <ul id="slider">
                <li><img src="http://placehold.it/1900x1080&text=srodkowy 1" alt=""></li>
                <li><img src="http://placehold.it/1900x1080&text=qwe" alt=""></li>
                <li><img src="http://placehold.it/1900x1080&text=ewq" alt=""></li>
            </ul>
        </div>
        <div class="item">
            <!-- Set the second background image using inline CSS below. -->
            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Normalny 1');"></div>

        </div>
        <div class="item">
            <!-- Set the third background image using inline CSS below. -->
            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Normalny 2');"></div>

        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
    </a>

</header>